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

时间:2016-12-07 18:21:33

标签: kendo-ui kendo-sortable

我有两个kendo可排序列表,其中我可以从左到右拖动多选项目。一切看起来不错,但我经历了这种奇怪的行为。第二次我斜向上(东北),占位符" Drop here"直到稍微向下移动鼠标才会出现。

开始拖动"草莓"然后" Pinapples"到右边的清单。请记住,您的光标应向北移动,直到您到达"草莓"

的下方

这是剑道拖放的限制吗?

以下是我正在使用的Dojo

1 个答案:

答案 0 :(得分:1)

所以,我看了一下kendo源代码,并在一个本地项目中使用了你的代码,其中包含一堆console.log()' s以及我发现的内容:

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

这就是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(向上移动)AND offsetDelta.top&gt; 0(您位于放置区顶部之下)

所以两种情况都不正确。

您向下拖动1个像素的那一刻:

  • axisDelta.y为1(您正在向下移动)AND offsetDelta.top&gt; 0(仍然低于掉落区域的顶部)

所以你落入direction = 'next';并且_movePlaceholder()将被调用,因为方向设置和&#34; Drop Here&#34;出现在&#34; next&#34;现货(在最后一项下面)。

如果您从放置区域的顶部拖动,则会遇到direction = 'prev';案例和&#34; Drop Here&#34;出现在&#34; prev&#34;斑点(在第一项之上)。

moveOnDragEnter变量似乎是一个未记录的选项,您可以在可排序的init上设置为true以覆盖offsetDelta检查但是如果设置它,它将导致&#34; Drop Here&#34;在进入拖放区域后立即出现但是如果你进入拖动它将出现在列表的顶部,如果你进入拖拽它将显示在列表的底部...这不是你想要的。

呼!

所以....不,用现在的逻辑来说,没有办法向上拖动并获得&#34; Drop Here&#34;显示在列表的底部,这是可排序的限制。

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

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
}

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