jquery可拖动/可放置更改快照

Posted 2023-05-08

【中文标题】jquery可拖动/可放置更改快照

【英文标题】：jquery draggable / droppable change snap

【发布时间】：2015-09-19 17:44:07

【问题描述】：

我正在尝试创建一系列可拖放的 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）。 无论如何要强制一个新的快照位置？

谢谢

【问题讨论】：

你能不能解决你的问题，以便我们更好地了解你的问题！

小提琴：jsfiddle.net/kLpgukkj/2

【参考方案1】：

至于您提到的小提琴，您只将droppable 事件绑定到一个元素。那是

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

据我了解，您希望其他黑盒也具有可放置事件绑定。

只需将 droppable 部分中的代码更改为以下代码即可。

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

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

查看更新的小提琴here。

【讨论】：

你好 Dimal。问题是，捕捉仍然只发生在 box1。它应该捕捉到 box1，然后是 box2，然后是 box3

如果您查看第 24-32 行，我会在此处更改 trackID 变量。我怀疑可能需要对可拖动对象进行某种重新初始化？

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

【参考方案2】：

我发现添加：

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

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

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

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