Jquery sürüklenebilir ve bırakılabilir olay temsilci: dur & bırak

Question

Sorunum, düşürülmüş öğenin konumunu elde etmektir.
Yeni konum almak için .draggable numaralı telefonu kullanarak stop: seçeneğini kullanıyorum.

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

zaman ben, yani ana öğesinden kaldırmaz ve yeni ebeveyn İt's bunu eklemek istiyorsunuz sürükledi.
i .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(); 
    } 
}); 

i/ekleme kaldırmak ilgisi bu yeni pozisyon sol üst olacaktır.
Yani düşürülmüş konumu .draggable'dan almalı ve öğeyi düştüğü yere taşımak için .droppable bırakma işlevinde kullanmalısınız.

Sorunum burada başlıyor!
Konsolda şunu elde ederim: Stoppos tanımlı değil.
Sürüklenebilir bırakma önce sürüklenebilir bırakma yürütür ?!

Bunu nasıl çözebilirim?
İndeks sorunları nedeniyle bir klon oluşturmam gerekiyor. Bu nedenle, öğeyi de kaldırmam/eklemem gerekiyor.

Answer 1

Geçirilen işlevin niteliklerinden yararlanmanızı öneririm.

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

Bu size Konumunu verecek ve {top, left} nesne olarak yardımcı Ofset. Bunları, yardımcınızı düşünüldüğünde takarken kullanabilirsiniz.

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

Yani dışa doğru bunu koduyla yanlış, ama bir küçük şey fark şey, fonksiyonların değişken stopPos ve stopOff dışarıdan tanımıdır. Bu yöntemde

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

, değişken de ulaşılabilir: Sonunda gibi olmalıdır. Eğer onu sadece fonksiyonun içinde tanımlarsanız, diğer işlevlere erişemez.