jquery - Kendo 可排序(两列): Issues moving panels

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 帮助解决这个问题。这是一个工作 fiddle :http://jsfiddle.net/fmpeyton/m72f5z6h/