jQuery可拖动/可放置更改捕捉

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

上述方法很好用，但拖动的元素会一直贴着路径0（最初的可拖动div）。有没有办法强制指定新的吸附位置呢？

谢谢。

- JPJens

---

你能否为你的问题创建一个fiddle，这样我们就可以更好地了解你的问题！ - Imesh Chandrasiri

Fiddle：http://jsfiddle.net/kLpgukkj/2/ - JPJens

Answer 1

关于你提到的小提琴，你只将droppable事件绑定到一个元素上。

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

据我理解，您希望其他黑色方框也具有可放置事件绑定。

只需将代码更改为以下内容即可在droppable部分。

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

这将会将事件绑定到页面中的每个.path元素。

在这里查看更新后的fiddle 链接。

- Imesh Chandrasiri

---

嗨Dimal。 问题是，吸附仍然只发生在box1上。它应该先吸附到box1，然后是box2，最后是box3。 - JPJens

如果您查看第24-32行，我在那里更改了trackID变量。 我怀疑可能需要重新初始化可拖动对象？ - JPJens

如果您可以将第44行更改为snap: '.path'，而不是重新初始化插件，则它将捕捉到每个元素，但会接受下一个应该接受该项的项目！我已经更新了fiddle。http://jsfiddle.net/kLpgukkj/4/ - Imesh Chandrasiri

Answer 2

我发现添加以下内容：

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

将强制它捕捉到新元素。 此外，使用

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

会失败，因为显然需要重新初始化才能使用不同的元素作为可放置元素。

- JPJens