Javascript - Doubt when manipulating div’s values with variables

Asked

Viewed 69 times

2

Good afternoon !
I have a question regarding the manipulation of div’s values...
When dragging an image from the div fundo1 (blue) or the fundo2 (yellow) to div conteudo, would like the values present within the div fundo1 (or fundo2) to the textbox as in the following image:
inserir a descrição da imagem aqui If it is the image of the blue div, the textbox will be set to 1
If it is the yellow image, it will be set to 2.
I’m having trouble recognizing the value of the div valorFundo1 (value 1) and valorFundo2 (value 2) within div’s and presents it in the textbox

Pardon ignorance anything and thank you !!

//Drag'n Drop functions
var elementCounter = 0; // Para designar a ID do elemento dropado.

function allowDrop(ev) {
  if (ev.target.getAttribute("droppable") == "false") {
    ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
    ev.preventDefault();
  } else {
    ev.dataTransfer.dropEffect = "all"; // drop it like it's hot
    ev.preventDefault();
  }
}


function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "copy";
}

function drop(ev, div) {
  ev.preventDefault();
  var x = ev.clientX;
  var y = ev.clientY;
  var data = ev.dataTransfer.getData("text");
  var copyimg = document.createElement("img");
  var original = document.getElementById(data);
  var altura = document.getElementById("drag1").height;
  var largura = document.getElementById("drag1").width;
  var c = x - largura;
  var d = y - altura;
  copyimg.src = original.src;
  div.appendChild(copyimg);
  if (original.parentNode.id == "conteudo") {
    if (ev.target.tagName == "IMG") { // Se a imagem estiver dropando em uma imagem
      console.log(ev.target.tagName);
      original.parentNode.removeChild(original);
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    } else { // Se não, é porque a imagem está sendo dropada em uma div
      original.parentNode.removeChild(original);
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    }
  } else {
    if (ev.target.tagName == "DIV") { // Se a imagem está sendo movimentada dentro da div conteudo
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    } else { // Se não, é porque está sendo dropada na IMG
      console.log(ev.target.tagName);
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    }
  }
}
.conteudo-externo {
  width: 55%;
  height: 60%;
  z-index: 3;
  background: red;
  border: 1px solid;
  float: left;
}

.conteudo {
  width: 320px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid #000;
  z-index: 5;
  background: blue;
  margin: 35px auto;
}

.img {
  z-index: 1;
  width: 130px;
  height: 130px background-position:center;
  opacity: 0.5;
}

#fundo1 {
  width: 200px;
  height: 200px;
  z-index: 3;
  background: blue;
  border: 1px solid;
  float: left;
}

#fundo2 {
  width: 200px;
  height: 200px;
  z-index: 3;
  background: yellow;
  border: 1px solid;
  float: left;
}


}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Biblioetca JQuery -->
</head>

<body>

  <div class="conteudo-externo" id="conteudo-externo">
    <div id="conteudo" class="conteudo" ondrop="drop(event, this)" ondragover="allowDrop(event)">
    </div>
    <input id="totalizador" name="totalizador" class="text" size="1" type="text" readonly="true" value="0" maxlength="999999" style=";border:0px solid #fff" /> <br>
  </div>
  <div id="fundo1">
    <img id="drag1" src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="drag(event)" alt="" />
    <div id="valor1" class="valFundo1"> 1 </div>
  </div>
  <div id="fundo2">
    <img id="drag2" src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="drag(event)" alt="" />
    <div id="valor2" class="valFundo2"> 2 </div>
  </div>
</body>

</html>

javascript css html5 drag-n-drop
  • 1

    It doesn’t matter if the drag falls inside the circle or outside?

  • The red part outside is like draggable="false", I dropped it only in the blue part (what is interesting to us)

1 answer

2


You can do it by joining two lines:

var valorOrigem = original.nextElementSibling.textContent;
div.nextElementSibling.value = Number(div.nextElementSibling.value) + Number(valorOrigem);


//Drag'n Drop functions
var elementCounter = 0; // Para designar a ID do elemento dropado.

function allowDrop(ev) {
  if (ev.target.getAttribute("droppable") == "false") {
    ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
    ev.preventDefault();
  } else {
    ev.dataTransfer.dropEffect = "all"; // drop it like it's hot
    ev.preventDefault();
  }
}


function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "copy";
}

function drop(ev, div) {
  ev.preventDefault();
  var x = ev.clientX;
  var y = ev.clientY;
  var data = ev.dataTransfer.getData("text");
  var copyimg = document.createElement("img");
  var original = document.getElementById(data);
  var valorOrigem = original.nextElementSibling.textContent;
  div.nextElementSibling.value = Number(div.nextElementSibling.value) + Number(valorOrigem);
  var altura = document.getElementById("drag1").height;
  var largura = document.getElementById("drag1").width;
  var c = x - largura;
  var d = y - altura;
  copyimg.src = original.src;
  div.appendChild(copyimg);
  if (original.parentNode.id == "conteudo") {
    if (ev.target.tagName == "IMG") { // Se a imagem estiver dropando em uma imagem
      console.log(ev.target.tagName);
      original.parentNode.removeChild(original);
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    } else { // Se não, é porque a imagem está sendo dropada em uma div
      original.parentNode.removeChild(original);
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    }
  } else {
    if (ev.target.tagName == "DIV") { // Se a imagem está sendo movimentada dentro da div conteudo
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    } else { // Se não, é porque está sendo dropada na IMG
      console.log(ev.target.tagName);
      copyimg.id = "dropped_elem" + (++elementCounter);
      copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
      copyimg.setAttribute('draggable', true);
      copyimg.setAttribute('ondragstart', "drag(event)");
    }
  }
}
.conteudo-externo {
  width: 55%;
  height: 60%;
  z-index: 3;
  background: red;
  border: 1px solid;
  float: left;
}

.conteudo {
  width: 320px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid #000;
  z-index: 5;
  background: blue;
  margin: 35px auto;
}

.img {
  z-index: 1;
  width: 130px;
  height: 130px background-position:center;
  opacity: 0.5;
}

#fundo1 {
  width: 200px;
  height: 200px;
  z-index: 3;
  background: blue;
  border: 1px solid;
  float: left;
}

#fundo2 {
  width: 200px;
  height: 200px;
  z-index: 3;
  background: yellow;
  border: 1px solid;
  float: left;
}


}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Biblioetca JQuery -->
</head>

<body>

  <div class="conteudo-externo" id="conteudo-externo">
    <div id="conteudo" class="conteudo" ondrop="drop(event, this)" ondragover="allowDrop(event)">
    </div>
    <input id="totalizador" name="totalizador" class="text" size="1" type="text" readonly="true" value="0" maxlength="999999" style=";border:0px solid #fff" /> <br>
  </div>
  <div id="fundo1">
    <img id="drag1" src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="drag(event)" alt="" />
    <div id="valor1" class="valFundo1"> 1 </div>
  </div>
  <div id="fundo2">
    <img id="drag2" src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="drag(event)" alt="" />
    <div id="valor2" class="valFundo2"> 2 </div>
  </div>
</body>

</html>

Looking at the code there is a lot of repetition... this can be done with less code.
A suggestion would be:

//Drag'n Drop functions
var elementCounter = 0; // Para designar a ID do elemento dropado.
var originalElement;

function onDragOver(ev) {
  var isDroppable = ev.target.getAttribute("droppable") !== "false";
  ev.dataTransfer.dropEffect = isDroppable ? "all" : "none";
  ev.preventDefault();
}

function onDragStart(ev) {
  originalElement = ev.target;
  ev.dataTransfer.setDragImage(originalElement, 15, 15);
}

function getCoords(ev) {
  var mouseCoords = {
    x: ev.clientX,
    y: ev.clientY
  }
  return mouseCoords

}

function drop(ev) {
  var valorOrigem = originalElement.nextElementSibling.textContent;
  var input = ev.target.nextElementSibling;
  input.value = Number(input.value) + Number(valorOrigem);

  var clone = originalElement.cloneNode(true);
  var mouseCoords = getCoords(ev);
  clone.style.left = mouseCoords.x - 15 + 'px';
  clone.style.top = mouseCoords.y - 15 + 'px';
  ev.target.appendChild(clone);
}
.conteudo-externo {
  width: 55%;
  height: 60%;
  z-index: 3;
  background: red;
  border: 1px solid;
  float: left;
}

.conteudo {
  width: 320px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid #000;
  z-index: 5;
  background: blue;
  margin: 35px auto;
}

.conteudo [draggable] {
  position: absolute;
}

.img {
  z-index: 1;
  width: 130px;
  height: 130px background-position:center;
  opacity: 0.5;
}

#fundo1 {
  width: 200px;
  height: 200px;
  z-index: 3;
  background: blue;
  border: 1px solid;
  float: left;
}

#fundo2 {
  width: 200px;
  height: 200px;
  z-index: 3;
  background: yellow;
  border: 1px solid;
  float: left;
}


}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Biblioetca JQuery -->
</head>

<body>

  <div class="conteudo-externo" id="conteudo-externo">
    <div id="conteudo" class="conteudo" ondrop="drop(event, this)" ondragover="onDragOver(event)">
    </div>
    <input id="totalizador" name="totalizador" class="text" size="1" type="text" readonly="true" value="0" maxlength="999999" style=";border:0px solid #fff" /> <br>
  </div>

  <div id="fundo1">
    <img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="onDragStart(event)" alt="" />
    <div id="valor1" class="valFundo1"> 1 </div>
  </div>
  <div id="fundo2">
    <img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="onDragStart(event)" alt="" />
    <div id="valor2" class="valFundo2"> 2 </div>
  </div>
</body>

</html>

  • 1

    I’m going to study the code !! Thanks for helping @Sergio !!

  • if the text were outside the content div, it would be possible for me to assign the value to it anyway??

  • 1

    @Sora yes, if it is a single element on the page you can give it an ID. Otherwise it is looking for relationships in the DOM for example.

  • Can you give me an example of attribution please? i assigns the text id to Totalizer, but when executing the code, returns a null error. It would be by getElementBy??

  • $(totaliser). setAttribute("value", valueOriginal); something like that?

  • @Sora is a input? or a div?

  • The input totaliser will receive the value of a div (valor1) separate, which is within another div (fundo1)

  • My question is whether the input is outside these divs presented as content or external content... Suppose she’s on another call totalFoot

  • 1

    @Sora if you have an element with ID you can use document.getElementById('a-id-do-element'). If it’s a input uses .value, if it is a div uses .textContent. Regardless of where Ids are seen to be unique. So, for a input you could do: document.getElementById('totalizador').value = 'novo valor';

  • Aaaah, got it, thank you so much for the explanation !!! Have a great day @Sergio

Show 5 more comments

Browser other questions tagged javascript css html5 drag-n-drop

You are not signed in. Login or sign up in order to post.