Javascript draggable I need to reference the initial dragged object so I can swap
<p>The functionality I need is when you drag an element and drop it on another element they swap position.</p>

<p>I want to write a swap function like this.</p>

<pre><code>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);
}
</code></pre>

<p>So as arguments I need to pass the inital dragged element, then on <code>drop</code> pass the dropped element. </p>

<pre><code>  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);
</code></pre>

<p>So with the above what I am doing is using <code>dataTransfer</code> but this is not actually referencing the initial node, it just clones the HTML.</p>

<p>So my question is how can I reference the initial dragged node so that I can run my swap function?</p>