ListView能否同时使用kendoDropTarget与kendoSortable？排序崩溃求助

我看了你的代码，问题出在Sortable组件的change事件处理逻辑上——手动执行remove再insert的操作会引发数据源的索引混乱，尤其是当移动列表末尾元素时，很容易导致应用崩溃。咱们直接来修正这个问题：

核心问题分析 #

当你调用selectedProducts.remove(dataItem)后，数据源会立即更新，这时候原本的newIndex位置已经失效了，后续的insert操作就会因为索引不匹配触发错误。其实Kendo的Sortable组件本身就支持和数据源直接联动，完全不需要手动去处理删除和插入的逻辑。

修复后的完整代码 #

// 初始化产品列表及拖拽功能
$("#products-list").kendoListView({ 
    selectable: "single", 
    dataSource: productsList, 
    template: kendo.template($('#item-template').html()) 
}); 

$("#products-list").kendoDraggable({ 
    filter: ".item", 
    hint: function (element) { return element.clone(); }, 
    dropTarget: "#selected-products-list" // 修正之前的配置项错误，原写法kendoDropTarget是不对的
}); 

// 初始化已选产品列表
$("#selected-products-list").kendoListView({ 
    dataSource: selectedProducts, 
    template: kendo.template($('#selected-item-template').html()) 
}); 

// 处理拖拽到已选列表的逻辑
$("#selected-products-list").kendoDropTarget({ 
    drop: function (e) { 
        var draggableElement = e.draggable.currentTarget,
            dataItem = productsList.getByUid(draggableElement.data("uid")); 
        selectedProducts.add(dataItem);
        // 可选：如果需要拖拽后从原列表移除产品，添加下面这句
        // productsList.remove(dataItem);
    } 
}); 

// 修正后的Sortable配置，让组件自动处理数据源排序
$("#selected-products-list").kendoSortable({ 
    filter: ".item", 
    cursor: "move", 
    placeholder: function (element) { 
        return element.clone().css("opacity", 0.1); 
    }, 
    hint: function (element) { 
        return element.clone().removeClass("k-state-selected"); 
    }, 
    // 关键配置：绑定数据源，Sortable会自动同步排序结果
    dataSource: selectedProducts,
    // 可选：如果需要排序完成后做额外操作，保留change事件即可
    change: function (e) {
        console.log("排序完成，当前已选产品顺序:", selectedProducts.data().map(item => item.name));
    }
});

关键修改点说明 #

1. 修正Draggable配置错误：把kendoDropTarget改成正确的dropTarget，确保拖拽目标能被正确识别。
2. 移除手动数据源操作：删除了change事件里的remove和insert调用，改用Sortable的dataSource配置项，让组件自动处理数据源的排序逻辑，从根源避免索引混乱。
3. 模板注意事项：请确保你的ListView模板里保留了data-uid="#= uid #"属性（比如<div class="item" data-uid="#= uid #">...</div>），这是Kendo组件识别数据项的关键标识。

内容的提问来源于stack exchange，提问作者Brett Davis