Можно ли перетаскивать строки за пределы сетки кендо и сортировать их одновременно?

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