还原一个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. 停止拖动这些可拖动块时，检查它们是否落在拖放点中。
   • 如果他们这样做，将其放置在插槽顶部。
   • 如果他们没有，他们位置上的原始坐标的顶部

随意问任何问题;）