還原一個jQuery拖動對象返回到一個特定的容器時，在非投擲的部分

Question

這裏被丟棄是我的代碼示例：http://jsfiddle.net/german_martin/hr8Q7/1/

我有一個名爲「未分配容器」的容器，它裏面其他可拖動對象（「標題A」，「標題B」等） 而我有其他4個容器叫做「容器」

我的問題的例子：當用戶在「標題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. 停止拖動這些可拖動塊時，檢查它們是否落在拖放點中。
   • 如果他們這樣做，將其放置在插槽頂部。
   • 如果他們沒有，他們位置上的原始座標的頂部

隨意問任何問題;）