Kendo ListBox：按顺序返回丢弃的项目答案

【问题标题】：Kendo ListBox: Return dropped items in orderKendo ListBox：按顺序返回丢弃的项目
【发布时间】：2020-02-18 02:05:18
【问题描述】：

我正在使用两个相互连接的列表框，允许在两者之间进行拖放。虽然使用在另一个线程中找到的重新排序代码解决了在同一列表中重新排序项目的问题，但它不能解决将项目从一个列表框拖放到另一个列表框时的问题。我知道这是因为这不是“重新排序”操作，而是“删除”操作。我尝试了很多不同的角度，比如使用“add”事件，但是 (e) 对象中没有“offset”属性。

我怎样才能完成同样的事情，即保持被丢弃的项目在视觉上被丢弃的顺序？

这是我的小部件函数，它带有 reorder 事件，可以正确地排序项目，因为它们显示在 listBox 中（为什么这不会自动发生，我无法理解！）。请记住，reorder 事件仅在在同一个 listBox 中移动项目时发生，而不是在将项目从一个 listBox 拖动到另一个时发生。

$("#myMenus").kendoListBox({
    draggable: true,
    connectWith: "baseMenus",
    dropSources: ["baseMenus"],
    add: function(e) {
        console.log('ADD');
        console.log(e);
    },
    reorder: function(e) {
        e.preventDefault();
        var dataSource = e.sender.dataSource;
        var dataItem = e.dataItems[0];
        var index = dataSource.indexOf(dataItem) + e.offset;
        dataSource.remove(dataItem);
        dataSource.insert(index, dataItem);
    },
});

【问题讨论】：

我会研究Telerik's Demo，看看你的有什么不同。您想要的行为在他们的演示中有效。

标签： javascript jquery kendo-ui

【解决方案1】：

我已经设法完成了相同的任务，这取决于将项目放入第二个列表框中时出现的 html 提示。我已经用解决方案修改了你的代码。

$("#myMenus").kendoListBox({
    draggable: true,
    connectWith: "baseMenus",
    dropSources: ["baseMenus"],
    add: function(e) {
        e.preventDefault();
        var dataSource = e.sender.dataSource;
        var dataItem = e.dataItems[0];
        var index = $('li.k-drop-hint').index();
        dataSource.insert(index, dataItem);
    },
    reorder: function(e) {
        e.preventDefault();
        var dataSource = e.sender.dataSource;
        var dataItem = e.dataItems[0];
        var index = dataSource.indexOf(dataItem) + e.offset;
        dataSource.remove(dataItem);
        dataSource.insert(index, dataItem);
    },
});

【讨论】：