The functionality I need is when you drag an element and drop it on another element they swap position.
I want to write a swap function like this.
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);
}
So as arguments I need to pass the inital dragged element, then on drop pass the dropped element.
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);
So with the above what I am doing is using dataTransfer but this is not actually referencing the initial node, it just clones the HTML.
So my question is how can I reference the initial dragged node so that I can run my swap function?