Javascript 可拖动 我需要引用初始拖动的对象，以便我可以交换

Question

我需要的功能是当您将一个元素拖放到另一个元素上时，它们会交换位置。

我想写一个这样的交换函数。

function swapElements(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");
    obj1.parentNode.insertBefore(temp, obj1);
    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);
    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);
    // remove temporary marker node
    temp.parentNode.removeChild(temp);
}

因此，作为参数，我需要传递初始拖动元素，然后在drop传递放置的元素。

  var self = this;
  // drag start
  myNode.addEventListener("dragstart", function(e) {
    this.classList.add('dragstart');
    e.dataTransfer.setData('from', this.innerHTML);
  }, false);
  // drop event
  myNode.addEventListener("drop", function(e) {
    if (e.preventDefault) e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation();
    this.classList.remove('dragover');
    var obj1 = e.dataTransfer.getData('from');
    // user has dropped lets do the swap
    self.swapElements(obj1, this);
  }, false);

因此，对于上述内容，我正在做的是使用dataTransfer但这实际上并不是引用初始节点，它只是克隆了HTML。

所以我的问题是我如何引用初始拖动节点以便我可以运行我的交换函数？

Answer 1

您可以对两个事件处理程序使用公共变量，并将要拖动的元素存储在其中。

var dragged;
myNode.addEventListener("dragstart", function(e) {
    this.classList.add('dragstart');
    dragged=e.target;
  }, false);
 myNode.addEventListener("drop", function(e) {
    if (e.preventDefault) e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation();
    this.classList.remove('dragover');
    self.swapElements(dragged, e.target);
  }, false);