斜向上拖动项目时不出现 KendoSortable 占位符

Question

我有两个可排序的剑道列表，我可以在其中从左到右拖动多选项目。一切看起来都很好，但我经历了这种奇怪的行为。我第二次沿对角线向上（东北方向）拖动时，只有将鼠标向下移动一点，才会出现占位符“Drop here”。

开始将“草莓”和“菠萝”拖到右侧列表中。请记住，您的光标应该向东北移动，直到到达“草莓”的下方

这是剑道拖放的限制吗？

这是我正在使用的Dojo。

Answer 1

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

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

这就是剑道如何决定是否在 _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”出现在“下一个”位置（最后一项下方）。

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

moveOnDragEnter 变量似乎是一个未记录的选项，您可以在可排序初始化上将其设置为 true 以覆盖 offsetDelta 检查但如果您设置它，它将导致“Drop Here”在输入 drop 时立即出现区域但是，如果您输入向上拖动，它将显示在列表顶部，如果您输入向下拖动，它将显示在列表底部...这不是您想要的。

哇！

所以....不，按照当前的逻辑，没有办法向上拖动并使“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
}

...或者只是接受限制。