Jquery draggable＆droppable event delegation：stop＆drop

Question

私の問題は、ドロップされた要素の位置を取得することです。
私は.draggableにstop:オプションを使用して新しい位置を取得します。私はそれの親から要素を削除し、新しい親をit'sするためにそれを追加したいのですが、ドラッグ

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

。
これは私が/ APPENDを削除すると、新しい位置は左上になります.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(); 
    } 
}); 

で行います。
私は.draggableから落とした位置を取得し、ドロップされた場所に要素を移動するには、ドロップ機能.droppableで使用する必要があります。

これは私の問題が始まる場所です！
コンソールでは、次のようになります。Stopposが定義されていません。
drappable-dropはdraggable-stopの前に実行されると思いますか？

どうすればこの問題を解決できますか？
インデックスの問題が原因でクローンを作成する必要があります。したがって、私はまた、要素を削除/追加する必要があります。

Answer 1

渡される関数の属性を利用することをお勧めします。

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

これは、あなたの位置を与え、{top, left}オブジェクトとしてヘルパーのオフセットします。後で、あなたがあなたの落書きにヘルパーをつけているときにこれらを使うことができます。

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

だからあなたのコードで外側には何も問題はなく、一つの小さな事に気づくには、関数の変数stopPosとstopOff外の定義です。最終的には、次のようになります。

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

この方法では、両方の変数で変数にアクセスできます。関数の内部でのみ定義すると、他の関数からアクセスすることはできません。