在不可丟棄的部分中刪除jQuery可拖動對象時，將其還原回特定容器

Question

以下是我的代碼示例： http ： //jsfiddle.net/german_martin/hr8Q7/1/

我有一個名為“未分配的容器”的容器，里面有其他可拖動的對象（“標題A”，“標題B”等等）我還有其他4個容器叫做“容器”

我的問題示例：當用戶在“容器”中放置“標題A”（或其他）時，一切正常，但是當用戶將“標題...”放在外面時，此元素必須返回“未分配的容器”

問題：有沒有辦法讓“title ...”在用戶將其置於“容器”之外時返回“未分配的容器”？

圖片示例：

   $(function () {

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

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

Answer 1

我曾經做過這樣的事。 我使用以下代碼進行draggables。

$(".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")這是在object.data("inDroppable")放置了一個draggable時設置的。

可刪除代碼：

$('.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. 在停止拖動這些拖拽時，檢查它們是否落在了落點中。
   • 如果他們這樣做，將它放在插槽頂部。
   • 如果沒有，請將它們放在原始坐標的頂部

隨意提出任何問題;）