Jquery Drag & Drop Ereignisdelegierung: stop & drop

Question

Mein Problem ist es, die Position des Elements dropped.
Ich verwende stop: Option auf .draggable, um die neue Position zu erhalten.

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

Wenn schleppte ich das Element entfernen möchte von ihm Eltern, und fügen Sie sie neue Eltern es ist.
Das ich mit .droppable

$('.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(); 
    } 
}); 

Wenn ich entfernen/append, wird die neue Position links oben sein.
Also ich muss die abgelegte Position von .draggable bekommen und es in .droppable Drop-Funktion verwenden, um das Element dorthin zu verschieben, wo es fallen gelassen wurde.

Hier beginnt mein Problem!
In der Konsole bekomme ich: Stoppos ist nicht definiert.
Ich denke, der Droppable-Drop wird ausgeführt, bevor ziehbar-Stop ?!

Wie kann ich das lösen?
Ich muss einen Klon erstellen, wegen Indexproblemen. Daher muss ich auch das Element entfernen/anhängen.

Answer 1

Ich würde empfehlen, die Attribute der Funktion zu verwenden, die übergeben werden.

var stopPos = {}; 
var stopOff = {}; 

$('.elementsDiv').draggable({ 
    revert: 'invalid', //Revert when drop fails 
    helper: 'clone', //Drag a clone 
    stop: function(e, ui) { 
    stopPos = ui.position; 
    stopOff = ui.offest; 
    console.log(stopPos, stopOff); 
    } 
}); 

Dies wird Ihnen als {top, left} Objekt die Position und Offset des Helfer geben. Sie können diese später verwenden, wenn Sie den Helper in Ihrem DropPable anhängen.

$('.flakUp, .flakDown').droppable({ 
    accept: '.elementsDiv', 
    drop: function (event, ui) { 
    var draggedElement = $(ui.draggable); 
    var dropZone = $(this); 

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

    //Make element draggable 
    draggedElement.draggable(); 
    } 
}); 

Also nichts nach außen falsch mit Ihrem Code, aber eine kleine Sache bemerkt, ist die Definition der Variablen stopPos und stopOff außerhalb der Funktionen. Am Ende sollte es so aussehen:

$(function(){ 
    var stopPos = {}; 
    var stopOff = {}; 

    $('.elementsDiv').draggable({ 
     revert: 'invalid', //Revert when drop fails 
     helper: 'clone', //Drag a clone 
     stop: function(e, ui) { 
     stopPos = ui.position; 
     stopOff = ui.offest; 
     console.log(stopPos, stopOff); 
     } 
    }); 

    $('.flakUp, .flakDown').droppable({ 
     accept: '.elementsDiv', 
     drop: function (event, ui) { 
     var draggedElement = $(ui.draggable); 
     var dropZone = $(this); 

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

     //Make element draggable 
     draggedElement.draggable(); 
     } 
    }); 
    }); 

In dieser Methode können die Variablen von beiden zugegriffen werden. Wenn Sie es nur innerhalb der Funktion definieren, ist es für andere Funktionen nicht zugänglich.