JavaScript melaksanakan fungsi drag-and-drop berbilang elemen

Question

Saya menjumpai kod ini yang membolehkan anda menyeret dan melepaskan item dalam kawasan tertentu, tetapi saya tidak boleh menulisnya semula untuk membenarkan berbilang elemen diseret dan digugurkan kerana saya tidak tahu cara mendapatkan objek seret daripada drop_handler id fungsi

let offsetX;
let offsetY;

onDragStart = function(ev) {
  const rect = ev.target.getBoundingClientRect();

  offsetX = ev.clientX - rect.x;
  offsetY = ev.clientY - rect.y;
};

drop_handler = function(ev) {
  ev.preventDefault();

  const left = parseInt(id2.style.left);
  const top = parseInt(id2.style.top);

  id1.style.position = 'absolute';
  id1.style.left = ev.clientX - left - offsetX + 'px';
  id1.style.top = ev.clientY - top - offsetY + 'px';
  id2.appendChild(document.getElementById("id1"));
};

dragover_handler = function(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
};

<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">拖动的Div</div>


<div id="id2" style="position:absolute;left:200px;top:50px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">放置的Div
</div>

Answer 1

Gunakan pembolehubah ini dalam onDragStart中，“保存”dragElement。这样你就可以在drop_handler untuk mengalihkan item.

Saya dropElement添加了一个const kerana ia tidak akan berubah.

let offsetX;
let offsetY;
let dragElement = null;
const dropElement = document.getElementById("id-drop");

onDragStart = function(ev) {
  const rect = ev.target.getBoundingClientRect();

  offsetX = ev.clientX - rect.x;
  offsetY = ev.clientY - rect.y;
  
  dragElement = ev.target;
};

drop_handler = function(ev) {
  ev.preventDefault();

  const left = parseInt(dropElement.style.left);
  const top = parseInt(dropElement.style.top);

  dragElement.style.position = 'absolute';
  dragElement.style.left = ev.clientX - left - offsetX + 'px';
  dragElement.style.top = ev.clientY - top - offsetY + 'px';
  dropElement.appendChild(dragElement);
};

dragover_handler = function(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
};

<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">拖动的Div #1</div>

<div id="id2" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">拖动的Div #2</div>

<div id="id-drop" style="position:absolute;left:200px;top:50px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">放置的Div
</div>