JQuery UI：拖放：處理多個容器和溢出屬性

Question

我完全停留在拖放問題上：我需要能夠將位於第1行單元格中的黃色方塊拖入其中一個該行3

的細胞我做了一個小JS斌例如here

我的約束，所有的細胞必須具備的使用性能「溢出」，因爲細胞可以有大量的黃色方格。

我試圖將屬性「clone/original」和「AppendTo」應用到可拖動元素，但我沒有設法處理具有屬性溢出的主容器滾動條。

任何幫助將受到歡迎！

Answer 1

爲了能夠將元素拖到另一個表格單元中，需要將「幫助器」選項設置爲「克隆」。

$(this).draggable({ 
    opacity: 0.7, 
    helper: 'clone', 
    scroll: false 
}); 

現在可投放的「滴」事件，ui.draggable是被拖動的元素。你需要做什麼來將它追加到可拖拽的位置。

$(this).droppable({ 
    ... 
    drop: function(event, ui) { 
     $(this).addClass("cell-dropped"); 
     // "ui.draggable" is the element being dragged 
     // "this" is the droppable element 
     $(ui.draggable).appendTo(this); 
    } 
}); 

對於容器DIV的滾動，你必須明確地設置它的CSS位置值相對：

.container{ 
    ... 
    position: relative; 
} 

DEMO