jQuery UI仅在特殊区域中删除元素

我有一个jQuery UI的拖放问题。 我动态创建新元素，这些元素放在屏幕上的四个区域之一。 这些元素是可拖动的，我可以将它们放在屏幕上。 但我希望这些元素只能放在三个区域之一上。

我在这里创建了一个完整的工作示例： http ： //jsbin.com/enusu4/

通过单击红色边框区域中的文本，将创建一个新元素并将其放置在绿色区域drop1 。 现在，此元素只能放置到其中一个绿色区域（ drop1 ， drop2或drop3 ），而不是其他任何地方。 我怎样才能做到这一点？

最诚挚的问候，蒂姆。

Answer 1

我在这里回答了一个类似的问题，经过一些修改可以做你想做的事情：
使用Javascript：

 $(function() { $('.drag').draggable({ revert: "invalid", scope: "items" }); $('#droppable').droppable({ scope: "items", // if you want to disable the dragging after drop un-comment this /* drop: function(e, ui) { $(ui.draggable).draggable({"disabled":true}); } */ }); $('#droppable2').droppable(); $(':button').click(function() { var $box = $('
Drag me
'); $('#cont').append($box); $box.draggable({ revert: "invalid", scope: "items" }); }); }); 

HTML：

 
Add box
 
Drop here
 
Out of scope!
 
 
 
Drag me
 
Drag me
  

示例链接

编辑：好的，这是一个更新：
使用Javascript：

 $(function() { var dragOptions = { revert: "invalid", scope: "items", helper: "clone" } $('.drag').draggable(dragOptions); $('.droppable').droppable({ scope: "items", drop: function(e, ui) { var $drop = $(this); $(ui.draggable).draggable({ "disabled": true }).appendTo($drop); } }); $('#droppable2').droppable(); $(':button').click(function() { var $box = $('
Drag me
'); $('#cont').append($box); $box.draggable(dragOptions); }); }); 

HTML：

 
Add box
 
Drop here:
 
 
 
Drop here:
 
 
 
Out of scope!
 
 
 
 
 
Drag me
 
Drag me
  

示例链接2

Answer 2

 $("#dropable").droppable({ hoverClass: "ui-state-hover", drop: function (event, ui) { if ( $('.ui-state-hover').size() > 0){return false;} //TODO } }