Jquery draggable & droppable event delegation: stop & drop
<p>My problem is to get the position of the dropped element.<br>
I use <code>stop:</code>option on <code>.draggable</code>to get the new position.<br></p>

<pre><code>$('.elementsDiv').draggable({
  revert: 'invalid', //Revert when drop fails
  helper: 'clone', //Drag a clone
  stop: function() {
    //Dropped position.
    Stoppos = $(this).position();
  }
});
</code></pre>

<p>When dragged i'd like to remove the element from it's parent, and append it to it´s new parent.<br>
This i do with <code>.droppable</code><br></p>

<pre><code>$('.flakUp, .flakDown').droppable({
    accept: '.elementsDiv',
    drop: function (event, ui) {

        //get dragged element
        var draggedElement = $(ui.draggable);

        //get dropZone
        var dropZone = $(this); 

        //Remove element from list and append it to dropZone
        draggedElement.detach().appendTo(dropZone.position(Stoppos));

        //Make element draggable
        draggedElement.draggable();
    }
});
</code></pre>

<p>When i remove/append, the new position will be top-left.<br>
So i must get the dropped position from <code>.draggable</code> and use it in <code>.droppable</code> drop function to move the element to where it was dropped.</p>

<p>This is where my problem starts!<br>
In console i get: Stoppos is not defined.<br>
I guess the droppable-drop executes before draggable-stop?!<br></p>

<p>How can i solve this?<br>
I need to create a clone, because of index problems. Therefore i also need to remove/append the element.</p>