将项目沿对角线向上拖动时，不会出现 KendoSortable 占位符

Question

我有两个 kendo 可排序列表，我可以在其中将多选项目从左向右拖动。一切看起来都不错，但我遇到了这种奇怪的行为。第二次我斜向上（东北方向）拖动，占位符"Drop here"要等鼠标向下移动一点才会出现。

开始拖动 "Strawberries"，然后 "Pinapples" 到右侧列表。请记住，您的光标应向东北移动，直到到达 "Strawberries"

下方

这是kendo拖放的限制吗？

这是我正在使用的Dojo。

Answer 1

所以，我查看了 kendo 源代码，并在本地项目中使用了你的代码和一堆 console.log()，这是我发现的：

（感兴趣的方法是Sortable的_drag()和_movePlaceholder()class）

这就是 kendo 决定是否在 _drag() 中显示占位符（调用 _movePlaceholder()）的方式：

if (axisDelta.y < 0 && (moveOnDragEnter || offsetDelta.top < 0)) {
    direction = 'prev';
} else if (axisDelta.y > 0 && (moveOnDragEnter || offsetDelta.top > 0)) {
    direction = 'next';
}

当您将光标向上移动到右侧拖放区时：

axisDelta.y 是 -1（向上移动）并且 offsetDelta.top > 0（你低于放置区域的顶部）

所以这两种情况都不成立。

向下拖动 1 个像素的瞬间：

axisDelta.y 为 1（您正在向下移动）并且 offsetDelta.top > 0（仍低于放置区域的顶部）

所以你落入 direction = 'next'; 并且 _movePlaceholder() 将被调用，因为方向已设置并且 "Drop Here" 出现在 "next" 位置（在最后一项下方）。

如果您从放置区域的顶部拖动，您会点击 direction = 'prev'; 大小写并且 "Drop Here" 出现在 "prev" 位置（第一项上方）。

moveOnDragEnter 变量似乎是一个未记录的选项，您可以在 sortable init 上将其设置为 true 以覆盖 offsetDelta 检查但是如果您设置它，它将导致 "Drop Here" 出现进入拖放区域后，如果你输入向上拖动，它会出现在列表的顶部，如果你输入向下拖动，它会出现在列表的底部......这不是你想要的。

哇哦！

所以....不，根据当前逻辑，无法向上拖动并使 "Drop Here" 出现在列表底部，这是可排序的限制。

现在，如果您愿意，您可以编辑源代码以向逻辑中添加更多案例以检查更多条件组合，即：

if (I'm anywhere in the drop area) {
    figure out if the cursor position is above the first item or below the last item and set direction accordingly so that _movePlaceholder() will get called
}

...或者接受限制。

将项目沿对角线向上拖动时，不会出现 KendoSortable 占位符

KendoSortable placeholder does not appear when item is dragged diagonally upwards

kendo-ui

kendo-sortable