Блог

Я использую два списка, связанных друг с другом, которые позволяют перетаскивать между ними. Хотя использование кода изменения порядка, найденного в другом потоке, устраняет проблему с изменением порядка элементов в том же списке, это не устраняет проблему при перетаскивании элемента из одного списка в другой. Я понимаю, это потому, что это не действие «изменить порядок», это действие «удалить». Я пробовал много разных способов, например, используя событие «добавить», но в объекте (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);
    },
});
  

Мне удалось выполнить ту же задачу, в зависимости от html-подсказки, которая появляется при удалении элемента во втором listbox. Я изменил ваш код с помощью решения.

 $("#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);
    },
});