0

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


                    });
4

1 回答 1

1

我举了一个通过 Telerik 论坛中的拖动来重新排序的示例： http ://www.telerik.com/forums/drag-and-drop-reordering

我已经扩充了示例以将网格外的行拖动到多个目标：

演示

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);
    }
});
于 2015-10-27T19:54:22.053 回答