Kendo Sortable（两列）：移动面板的问题

Question

到目前为止，这是我的工作代码：

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

这是 Kendo Sortable 启动器：

$(".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 实现中进行了优化。当您定义一个 Sortable 时，它​​会创建一个包含所有可排序元素的列表。当您尝试将元素放在相同的排序位置时，它会拒绝移动。 IE。如果您尝试将第一列的最后一个元素移动到第二列的第一个位置，KendoUI 会计算 oldIndex 和 newIndex 相同，因为没有变化，它会拒绝移动。

Sortable 用于排序，而不是用于拖放。当您在列之间移动元素时，您不是在排序，而是在拖放。在您的情况下，在一个列中排在最后或在另一列排在第一个之间确实存在很大的视觉差异，但是如果您从索引和数组的角度考虑，这并不相关。

当您有一个空列时，问题是放置区域必须是panel（您要过滤的内容）。为空，没有有效的放置区域。

您应该考虑使用Draggable 和DropTargetArea 和DropTarget。