是否可以将行拖出 kendo 网格并同时在其中排序?

Is it possible to drag row outside kendo grid and sort within at same time?

我可以在 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);
                                }
                            });


                    });

我从 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);
    }
});