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); 
} 

因此，作爲參數，我們需要通過inital拖動的元素，然後在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);