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

【问题标题】：Revert a jQuery draggable object back to a specific container when is dropped in non-droppable section将 jQuery 可拖动对象放置在不可放置部分中时，将其还原回特定容器
【发布时间】：2014-02-06 00:26:01
【问题描述】：

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

我有一个名为“Unassigned container”的容器，里面有其他可拖动的对象（“title 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
        });
  });

【问题讨论】：

标签： jquery draggable jquery-ui-sortable

【解决方案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");
}

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

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

请随时提出任何问题 ;)

【讨论】：