在KendoUI列表視圖中拖放重新排序

Question

Hy，我是KendoUI的新手，我試圖通過拖放來重新排列列表視圖。我注意到listVIew插件在其CORE中沒有可拖動的功能，所以我試圖從Kendo框架添加Draggable動作，但我甚至沒有關閉。

是否可以使用拖放對listView項目進行重新排序？

Kendolistview和Kendo Drag

我注意到KendoUI插件之一確實有這樣的特徵：

TreeView Demo

PS：演示或類似的東西是非常歡迎的。

Answer 1

如果需要，不僅表現爲一個ListView，但作爲一個實際的ListView，你可以做：

var dataSource = new kendo.data.DataSource({ 
    data : products, 
    pageSize: 10 
}); 

$("#listView").kendoListView({ 
    dataSource: dataSource, 
    template : kendo.template($("#template").html()), 
    dataBound : function() { 
     $(".product").kendoDraggable({ 
      hint: function (element) { 
       return element.clone(); 
      } 
     }); 
    } 
}); 

$("#listView").kendoDropTargetArea({ 
    filter: ".product", 
    drop : function (e) { 
     var srcUid = e.draggable.element.data("uid"); 
     var dstUid = e.dropTarget.data("uid"); 
     var srcItem = dataSource.getByUid(srcUid); 
     var dstItem = dataSource.getByUid(dstUid); 
     var dstIdx = dataSource.indexOf(dstItem); 
     dataSource.remove(srcItem); 
     dataSource.insert(dstIdx, srcItem); 
     e.draggable.destroy(); 

    } 
}); 

基本上我們用CSS類.product來標識每個元素，然後我們用它來插入它並從DataSource中移除它。這會自動重新繪製它。

參見運行例如這裏：http://jsfiddle.net/OnaBai/MYbgy/1/

Answer 2

我認爲這可能工作：

$("#sortable").kendoTreeView({ 
    dataSource :dataSource, 
    template :"<div class='ob-item'> #= item.text # </div>", 
    dragAndDrop:true, 
    drag  :function (e) { 
     var dst = $($(e.dropTarget).closest(".k-item")[0]).data("uid"); 
     var src = $(e.sourceNode).data("uid"); 
     if ($(e.dropTarget).hasClass("ob-item") && dst != src) { 
      e.setStatusClass("k-insert-top"); 
     } else { 
      e.setStatusClass("k-denied"); 
     } 
    }, 
    drop  :function (e) { 
     if ($(e.sourceNode).data("uid") !== $(e.destinationNode).data("uid")) { 
      $(e.sourceNode).insertBefore(e.destinationNode); 
     } 
     e.setValid(false); 
    } 
}); 

也有一些信息here