получить значение div из другого div?

#javascript #html

#javascript #HTML

Вопрос:

итак, у меня есть перетаскиваемый элемент HTML div:

 <div id="server" draggable="true" ondragstart="return dragStart(event)">Server</div>

и целевой div:

 <div id="target1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

если я перетаскиваю перетаскиваемый объект в цель, то как мне получить значение внутри перетаскиваемого объекта, если у меня есть только ссылка на цель, в которой находится перетаскиваемый объект?

Ответ №1:

Возможно, вы захотите использовать dataTransfer.setData метод для события перетаскивания и datatransfer.getData метод для события отбрасывания. Эти методы позволят вам передавать данные между вашими элементами.

 function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  var newText = ev.target.innerText;
  newText = "I've been dropped!";
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.setData("divData", newText);
  console.log(ev.target); //available data
}

function drop(ev) {
  var dragElemID = ev.dataTransfer.getData("text");
  var dragElemData = ev.dataTransfer.getData("divData");
  var draggedElem = document.getElementById(dragElemID)
  ev.preventDefault();
  ev.target.appendChild(draggedElem);
  ev.target.children[0].innerText = dragElemData;
}

 #div1{
  border:1px solid;
  width:100px;
  height:150px;
}

#drag1{
  background-color:lightblue;
  width:100px;
  height:100px;
}

 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Target Div</div>

<div id="drag1"draggable="true" ondragstart="drag(event)" width="336" height="69">Drop Div</div>