jquery draggable / droppable更改快照

Question

我正在嘗試創建一系列拖/拖放div。 一旦div1被刪除，我將創建一個新的div並讓它在新位置捕捉。 但是當div1被刪除並且div2被拖動時，捕捉位置保持不變：（ http://jsfiddle.net/kLpgukkj/2/ ）

var trackID = "path0";
var trackType = "a";

$('.map-track-box').droppable({
    tolerance: 'touch',
    drop: function(event,ui){
        // RETURNS HOME
        $('#trackDragger').animate({ top: '30px', left: '20px' },500);
    }
});

$('#'+trackID).droppable({
    tolerance: 'touch',
    drop: function(event,ui){
        // IN POSITION
        var pos = $('#'+trackID).position();
        $('#trackDragger').animate({ top: pos.top, left: pos.left },500,function() { 
            $('#draggerBox').append("<div class='"+trackType+"' style='z-index:10;position:absolute;top:"+pos.top+"px;left:"+pos.left+"px;'></div>");
            $('#trackDragger').css({ top: '30px', left: '20px' },500);
            $('#trackDragger').attr('class', 'd');
            $('#'+trackID).removeClass('ui-droppable'); // I attempted to remove the added class, and add it to the new element, but without luck
            if(trackID=="path0") {
                trackID = "path1";
            }else if(trackID=="path1") {
                trackID = "path2";
                trackType = "d";
            }else if(trackID=="path2") {
                trackID = "path3";
                trackType = "e";
            }
            $('#'+trackID).addClass('ui-droppable');
        });
    }
});


$('#trackDragger').draggable({
    revert: 'invalid',
    start: function(event,ui) {
        $('#trackDragger').attr('class', trackType);
    },
    snap: "#"+trackID, // This keeps snapping to initial div (path0) even though trackID is being changed to path1,path2 etc
    snapMode: "inner",
    stop: function(){
        var dragPos = $('#trackDragger').position();
        if(dragPos.left < 101 && dragPos.top < 91) {
            $('#trackDragger').attr('class', 'd');
        }
        //$(this).draggable('option','revert','invalid');
    }
});

上面的效果很好，但拖動的元素一直在捕捉到path0（初始可拖動的div）。 無論如何強制一個新的快照位置？

謝謝

Answer 1

至於你提到過的小提琴，你只能將droppable事件綁定到一個元素。 那是

$('#'+trackID) // Your variable don't change from "path0" to any other.

據我所知，你希望其他黑盒也有droppable事件綁定。

只需將代碼更改為droppable部分中的以下內容即可。

$('.path').droppable({});

這會將事件綁定到頁面中的每個.path元素。

在這里看到更新的小提琴。

Answer 2

我發現添加：

$('#trackDragger').draggable("option", "snap", "#"+trackID);

將強制它捕捉到新元素。 再使用

$('#'+trackID).droppable()...

會失敗，因為它顯然需要重新初始化才能使用不同的元素作為droppable。