我試圖在學習應用程序中實現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

回答

相關問題