如何在Kendo Grid中拖放期间直观地识别掉落目标？

Question

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

然而，当我拖动行时，我想突出显示拖动行下面的行，向用户表明他们是否要将其删除 - 这是要替换的行。

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

所以我的问题是如何在拖动操作期间直观地识别掉落的行目标。

Answer 1

您似乎正在使用错误的元素进行突出显示。如果您使用dragenter在currentTarget的{​​{1}}文本中登录$(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

<强>更新

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

Fiddle

我知道它不是那么漂亮，在某些情况下可能会降低性能，但我真的不知道其他任何方式。