是否可以在kendo網格外面拖動行並同時進行排序？

Question

我可以在kendo ui網格中拖動行。單獨將網格外部的行拖到另一個html元素。

是否有可能在同一時間執行兩個操作？

對於網格內：

網格內可拖動：

grid.table.kendoSortable({ 
        filter: ">tbody >tr", 
        cursor: "move", 
        hint: function(element) { 
         return $('<div class="k-grid k-widget"><table><tbody><tr>' + element.html() + '</tr></tbody></table></div>'); 
        }, 
        container: ".etr-watchlist_grid tbody", 
        change: function(e) { 
         let oldIndex = e.oldIndex, 
          newIndex = e.newIndex, 
          data = grid.dataSource.data(), 
          dataItem = grid.dataSource.getByUid(e.item.data("uid")); 

         grid.dataSource.remove(dataItem); 
         grid.dataSource.insert(newIndex, dataItem); 
        } 
       }); 

網格外拖動：

$(".myGrid table tbody > tr").kendoDraggable({ 
        group: "gridGroup", 
        threshold: 100, 
        hint: function(e) { 
         return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>'); 
        } 
       }); 


$(".dropHere").kendoDropTarget({ 
           group: "gridGroup", 
           drop: function(e) { 
            e.draggable.hint.hide(); 

            var txt = ''; 
            $(e.draggable.element[0]).find("td").each(function(idx, td){ 
             txt += $(td).text() + '\n'; 
            }); 
            e.dropTarget.text(txt); 
           } 
          }); 


        }); 

Answer 1

我已採取行的經由拖動重新排序的示例來自telerik論壇： http://www.telerik.com/forums/drag-and-drop-reordering

我已經增加補充電網向多個目標以外行的拖動以及例子：

DEMO

var grid = $("#grid").kendoGrid({ 
    dataSource: dataSource, 
    selectable: true,  
    columns: ["id", "text", "position"]    
}).data("kendoGrid");     

grid.table.kendoDraggable({ 
    filter: "tbody > tr", 
    group: "gridGroup", 
    threshold: 100, 
    hint: function(e) { 
     return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>'); 
    } 
}); 

grid.table.kendoDropTarget({ 
    group: "gridGroup", 
    drop: function(e) {   
     e.draggable.hint.hide(); 
     var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")), 
      dest = $(document.elementFromPoint(e.clientX, e.clientY)); 

     if (dest.is("th")) { 
      return; 
     }  
     dest = dataSource.getByUid(dest.parent().data("uid")); 

     //not on same item 
     if (target.get("id") !== dest.get("id")) { 
      //reorder the items 
      var tmp = target.get("position"); 
      target.set("position", dest.get("position")); 
      dest.set("position", tmp); 

      dataSource.sort({ field: "position", dir: "asc" }); 
     }     
    } 
}); 

$(".dropTarg").kendoDropTarget({ 
    group: "gridGroup", 
    drop: function(e) { 
     console.log(e.draggable) 
     e.draggable.hint.hide(); 

     var txt = ''; 
     $(e.draggable.currentTarget).find("td").each(function(idx, td){ 
      txt += $(td).text() + '\n'; 
     }); 
     e.dropTarget.text(txt); 
    } 
});