可拖動和可放置不能在固定尺寸的容器上工作

Question

我無法使draggable和droppable在固定尺寸的容器內工作。這是jsFiddle link。如果我刪除了div上的類tasks，那麼它會起作用，否則當我試圖將其拖動到可丟棄的div時，可拖動的項目可見性就會隱藏起來。請指向正確的方向。謝謝

Answer 1

由於樣式中的溢出，拖動的元素在其父代的邊界內受到限制。

您可以通過使用可拖動元素的helper: "clone"選項來處理此問題。

文檔：http://api.jqueryui.com/draggable/#option-helper

代碼：

$(function() { 

    $(".draggable > li").draggable({ 
     revert: "invalid", 
     cursor: "move", 
     containment: "document", 
     scroll: false, 
     helper: "clone" 
    }); 

    $(".droppable").droppable({ 
     accept: ".draggable > li", 
     activeClass: "ui-state-highlight", 
     drop: function (event, ui) { 
      ui.draggable.detach().appendTo($(this)); 
     } 
    }); 
}); 

在下拉功能存在，從原來的列表分離拖動的元素，並將其附加到新的功能。

演示：http://jsfiddle.net/IrvinDominin/Fx5TQ/