劍道可排序（兩列）：問題移動板

Question

這裏是我的工作到目前爲止的代碼：

http://jsfiddle.net/fmpeyton/9a8sxw9z/

這裏的劍道可排序的引發劑：

$(".panels").kendoSortable({ 
    filter: ".panel", 
    cursor: "move", 
    change: function() { 

    }, 
    placeholder: function (element) { 
     return element.clone() 
     .css({ "opacity": 0.8, }); 
    }, 
    hint: function (element) { 
     return element.clone() 
     .css({ "border": "1px solid #a2a2a2" }) 
     .height(element.height()) 
     .width(element.width()); 
    } 
}); 

我有幾個問題：

1. 當我從列中移動所有面板時，我無法將任何面板移回到空列
2. 在一些罕見的情況下，我無法移動某些面板。 （我可以重現的一種情況是將「面板1」從左列移動到右列的頂部，即使面板佔位符顯示，面板總是恢復到原來的位置）。
3. 當我有「面板1「，另外三個面板在右邊，爲了能夠在」面板1「下方放置面板，我需要先將它拖到」面板1「上以觸發此功能。理想情況下，我希望能夠將其拖到下面並放在那裏。

任何想法爲什麼會發生這些事情？是否有任何可以解決此問題的CSS更改？

Answer 1

我解決這個問題有兩個方面的途徑：

1. 初始化Sortable控件的兩個實例，並通過connectWith選項
2. 添加min-height到列它們連接，這樣就可以添加面板空列。

大道具@OnaBai幫助解決這個問題。這裏有一個工作小提琴：http://jsfiddle.net/fmpeyton/m72f5z6h/

Answer 2

對您的問題的解釋是因爲可能的在Kendo UI可排序實現中的優化。當你定義一個Sortable時，它會創建一個包含所有可排序元素的列表。當您嘗試在相同的排序位置放置元素時，它會拒絕移動。即如果您嘗試將第一列的最後一個元素移動到第二列的第一個位置，KendoUI計算oldIndex和newIndex是相同的，因爲沒有變化，它會拒絕移動。

Sortable是用於排序，而不是拖放。當您在列之間移動元素時，您並未進行排序，而是進行拖放。就你而言，確實是在一列中的最後一列或另一列中的最後一列之間存在很大的視覺差異，但是如果你認爲索引和數組不相關的話。

當你有一個空列的問題是，放置區域需要是panel（你正在過濾）。空着，沒有有效的地方放棄它。

您應該考慮使用Draggable和DropTargetArea和DropTarget。