是否可以将行拖到剑道网格之外？答案

【问题标题】：Is it possible to drag row outside kendo grid?是否可以将行拖到剑道网格之外？
【发布时间】：2015-10-26 19:11:23
【问题描述】：

我正在用几行填充剑道网格，并希望在网格和其他 html 组件之间实现 拖放功能。

我可以找到很多资源，告诉我如何在网格内拖放/排序行，甚至从一个网格到另一个网格，但对于从网格外部到另一个组件，没有任何内容。

kendo ui-grid 甚至支持这个吗？

我能想到的一种方法是 - 使整个网格可拖动，当拖动开始时获取当前选定的行数据并在放置时使用它。但这并不是一个非常干净的方法。在这种情况下，我什至需要制作自定义拖动图像。

还有其他建议吗？

【问题讨论】：

怎么不是很干净？使网格的tbody可拖动，拖动时定义可见元素，定义放置目标。如果您查看 Kendo 自己的代码，这正是其网格中可拖动行的实现方式。
是的，之前没有意识到。

标签： kendo-ui kendo-grid angular-dragdrop kendo-draggable

【解决方案1】：

您可以使用 kendoDropTarget() 方法指定另一个 html 元素作为目标。例如这里是一个网格和一个 HTML 文本区域：

<div id="grid"></div>
<textarea id="dropHere" rows="3" cols="50"></textarea>

$("#grid 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);
    }
});

DEMO

【讨论】：

感谢你的好榜样。我想知道是否可以在不丢失先前拖动的行的情况下继续添加行？就像在文本区域中有多个行信息块一样。