我试图在学习应用程序中实现drag and drop functionality。Jquery：防止droppable项目被丢弃在某些可丢弃的div之外

这是行之有效的，将物品放置到可投放区域的工作方式与其应该一样。

// Adding drop function to each category 
     jQuery.each(codes, function (index, value) { 
      jQuery(value).droppable({ 
       drop: function (event, ui) { 
       //additional logic here 
       } 
      }); 
     });

但是，如果我拖动我的物品并将它们留在无法移动的区域，那么它也会停留在那里。

帮我做投掷的某些div的物品而已，如果他们是这些地区之外，那么就应该回到

我已经做了样品小提琴的一部开拓创新的位置：

Demo Fiddle

来源

2014-03-28 Rex

有你看了一下[此帖]（http://stackoverflow.com/questions/1254665/jquery-draggable-droppable-how-to-snap-dropped-element-to-dropped元素）还没...？ – webeno

...或者更好，不是[这个例子]（https://jqueryui.com/droppable/#photo-manager）jQuery UI Droppable你在找什么...？ – webeno

正如webeno在他的评论中指出的那样，jQuery UI Droppable docs举例说明了如何将可拖动元素恢复到原始位置（如果未放置在可投放区域）。我已经通过将可选项添加到可拖动的选项来修改您的小提琴，以允许它在放置在无效（不可投放）区域时恢复位置：

$("#draggable").draggable({revert: "invalid"});。

jsFiddle

来源

2014-04-28 14:16:05 filoxo

Jquery：防止droppable项目被丢弃在某些可丢弃的div之外

Demo Fiddle

回答

相关问题