将 jQuery 可拖动对象放置在不可放置部分中时，将其还原回特定容器

Posted 2023-05-08

【中文标题】将 jQuery 可拖动对象放置在不可放置部分中时，将其还原回特定容器

【英文标题】：Revert a jQuery draggable object back to a specific container when is dropped in non-droppable section

【发布时间】：2014-02-06 00:26:01

【问题描述】：

这是我的代码示例：http://jsfiddle.net/german_martin/hr8Q7/1/

我有一个名为“Unassigned container”的容器，里面有其他可拖动的对象（“t​​itle A”、“title B”...等） 我还有另外 4 个容器，叫做“Container”

我的问题示例：当用户将“title A”（或其他）放入“Container”时，一切正常，但是当用户将“title ...”放在外面时，此元素必须返回“Unassigned container” "

问题：当用户将“标题...”放在“容器”之外时，有没有办法让“标题...”返回到“未分配的容器”？

图片示例：

   $(function () 

        $(".unassignedClassContainer").sortable(
            connectWith: ".container",
            handle: ".title",
            revert: true
        );

        $(".container").sortable(
            connectWith: ".container, .unassignedClassContainer",
            handle: ".title",
            revert: true
        );
  );     

【参考方案1】：

我曾经做过这样的事情。我将以下代码用于可拖动对象。

$(".draggable").draggable( 
        containment: '#content',
        cursor: 'move',
        snap: '#dropSlots',
        snapMode: "inner",
        start: function()
            Positioning.initialize($(this));
        ,
        stop: function() 
            Positioning.reset($(this));
        
     );

使用这个：

var Positioning = (function () 
    return 
        //Initializes the starting coordinates of the object
        initialize: function (object) 
            if ( object.data("dragged") != "1" ) 
                object.data("dragged", "1");
                object.data("originalLocation", $(this).originalPosition = top:0,left:0);
            
        ,
        //Resets the object to its starting coordinates
        reset: function (object) 
            if ( object.data("dragged") == "1" && object.data("inDroppable") != "1" )
                var OriginalLocationTop = object.data("originalLocation").top;
                var OriginalLocationLeft = object.data("originalLocation").left;
                $(object).animate(top: OriginalLocationTop, left: OriginalLocationLeft, 1500);
            
        ,
    ;
)();

如您所见，它使用 object.data("inDroppable") 这是在将可拖动对象拖放到可放置对象时设置的。

可放置代码：

$('.droppable').droppable( 
     drop: handleQuestionDrop,
     out: handleQuestionMoveOut,
     tolerance: "pointer"
 );

这使用了以下两个函数：

function handleQuestionMoveOut( event, ui ) 
    $(ui.draggable).data("inDroppable", "0");
    // A lot of other project related stuff, deleted...


function handleQuestionDrop( event, ui ) 

    // position draggable directly on top of the slot
    ui.draggable.position(                 
        my: 'left top',
        at: 'left top',
        of: $(this),
        using: function(css, calc) 
            ui.draggable.animate(css, 250, "linear");
                   
     );

    $(ui.draggable).data("inDroppable", "1");

如您所见，代码很多，我已经删除了所有不相关的代码。 那么这段代码实现的内容如下：

在第一次拖动时为您的可拖动对象指定一个“起始坐标”。 在停止拖动这些可拖动对象时，检查它们是否落在了放置点。 如果有，请将其放在插槽顶部。 如果没有，请将它们放置在原始坐标的顶部

请随时提出任何问题 ;)