jquery - 将 jQuery 可拖动对象拖放到不可拖放部分时将其恢复到特定容器

Question

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

我有一个名为“未分配容器”的容器，它里面有其他可拖动的对象(“标题 A”、“标题 B”...等)我还有另外 4 个名为“Container”的容器

我的问题示例:当用户将“标题 A”(或其他)放入“容器”中时，一切正常，但是当用户将“标题 ...”放在外面时，该元素必须返回到“未分配的容器” ”

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

图像示例:

   $(function () {

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

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

Answer 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");
}

正如你所看到的，有很多代码，我已经删除了所有不相关的代码。那么这段代码实现的内容如下:

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

如有任何问题，请随时提出；)