在 Kendo Grid 中如何在拖放过程中直观地识别放置目标？

Question

我在此 fiddle 中定义了一个简单的 Kendo 网格。我想将一行拖放到另一行上。那部分确实有效。

但是，当我拖动该行时，我想突出显示被拖动行下方的行以向用户表明如果他们将其拖放到此处 - 这就是将被替换的行。

为此，我处理了 grid.table.kendoDropTarget 上的 dragenter 和 dragleave 事件。不幸的是，它将整个网格视为放置目标，并且仅在我围绕网格移动拖动的项目时才触发一次事件。

所以我的问题是如何在拖动操作中直观地识别拖放的行目标。

Answer 1

看来您要突出显示的元素有误。如果您在 dragenter 中登录 currentTarget 的文本 - 使用 $(e.draggable.currentTarget).find("td:first").text() - 您会注意到它只显示您正在拖动的行的第一列的值。要突出显示的正确元素是 e.dropTarget[0]，它会随着您移动拖动的行而改变。

只需更改 - 在 dragenter 和 dragleave 中 - 这一行：

e.draggable.currentTarget.addClass("highlight-droparea");

到这一行：

$(e.dropTarget[0]).addClass("highlight-droparea");

Fiddle.

更新

我没有意识到在上面的代码片段中 drag/drop 只能使用一次。为了找出问题，我注意到在第一次 drop 之后，所有行都丢失了它们的 draggable 属性。所以我将 kendoDraggable() 和 kendoDropTarget() 包装到一个函数中，然后在 kendoDropTarget.drop 事件中我再次调用它，为行重新创建所有可拖动事件。

Fiddle.

我知道它不是那么漂亮，在某些情况下它可能会降低性能，但我真的不知道还有什么其他方法可以做到这一点。