Question

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

这里是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());
    }
});

我有一些问题：

当我从列中移出所有面板时，我无法将任何面板移回空列
在极少数情况下，我无法移动某些面板。（我可以重现的一种情况是移动＆＃34; Panel 1＆＃34;从左列到右列的顶部。即使面板占位符显示，面板也总是恢复到原始位置。）
当我有＆＃34;第1小组＆＃34;在左栏和右边的其他三个面板中，为了能够将面板放在＆＃34;面板1和＃34;我需要先将它拖过＆＃34; Panel 1＆＃34;触发此功能。理想情况下，我希望能够将它拖到下面然后放在那里。

知道为什么会发生这些事情吗？是否有任何CSS更改可以解决此问题？

Answer 1

我解决这个问题的方法有两个方面：

初始化Sortable窗口小部件的两个实例并通过connectWith选项连接它们
向列添加min-height，以便您可以将面板添加到空列。

给@OnaBai提供帮助解决这个问题的大道具。这是一个工作小提琴：http://jsfiddle.net/fmpeyton/m72f5z6h/

Answer 2

对您的问题的解释是因为Kendo UI Sortable实现中的可能的优化。定义Sortable时，它会创建一个包含所有可排序元素的列表。当您尝试将元素放在相同的排序位置时，它会拒绝该移动。即如果您尝试将第一列的最后一个元素移动到第二列的第一个位置，KendoUI会计算oldIndex和newIndex是相同的，因为没有更改，它会拒绝移动。< / p>

Sortable用于排序，而不是用于拖放。在列之间移动元素时，您不进行排序，而是进行拖放。在你的情况下，确实在一列中的最后一列或另一列中的第一列之间存在很大的视觉差异，但是如果你认为在索引和数组方面是不相关的。

当您有一个空列时，问题是丢弃区域必须是panel（您要过滤的内容）。空虚，没有有效的区域可以放弃它。

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

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

2 个答案: