Question

考虑以下标记和脚本：

|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|X|Y|Y|Y|Y|

<div id="container">
  <div draggable="true">
    <button type="button" id="button">Drag me!</button>
  </div>
  <div draggable="true"></div>
  <div draggable="true"></div>
  <div draggable="true"></div>
  <div draggable="true"></div>
</div>

我在一个容器中彼此之间有几个let dragged; document.getElementById("button").addEventListener("dragstart", function(e) { dragged = e.parentNode; // What to do here? }); let divs = document.querySelectorAll("#container div"); for (let i=0; i<div.length; i++) { divs[i].addEventListener("dragleave", function(e) { if (this.nextSibling == dragged) // move downwards { this.parentNode.insertBefore(dragged, this); } else // move upwards { this.parentNode.insertBefore(dragged, this.nextSibling); } }); }元素。 div元素一次只能附加到一个button。

1）我希望其中带有div的{{1}}元素弹出它的位置，并跟随鼠标光标拖动。

2）当div在邻居button上方移动时，我希望div滑入空白处。

是否有普通的JS解决方案？

Answer 1

在MDN上发布，因为OP所有者无法访问。

var dragged;

/* events fired on the draggable target */
document.addEventListener("drag", function(event) {

}, false);

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = .5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

}, false);

document.addEventListener("drop", function(event) {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }

}, false);

#draggable {
  width: 200px;
  height: 20px;
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin-bottom: 10px;
  padding: 10px;
}

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

拖动HTML元素以跟随鼠标光标

1 个答案: