Заполнитель KendoSortable не появляется, когда элемент перетаскивается по диагонали вверх

У меня есть два сортируемых списка кендо, в которых я могу перетаскивать несколько выбранных элементов слева направо. Все выглядит хорошо, но я столкнулся с этим странным поведением. Во второй раз, когда я перетаскиваю по диагонали вверх (на северо-восток), заполнитель «Перетащите сюда» не появится, пока вы немного не переместите мышь вниз.

Начните перетаскивать «Клубнику», затем «Ананасы» в правый список. Помните, что ваш курсор должен двигаться на северо-восток, пока вы не достигнете нижней части «Клубнички».

Является ли это ограничением перетаскивания кендо?

Вот Додзё, которое я использую.


person lionheart    schedule 07.12.2016    source источник


Ответы (1)


Итак, я просмотрел исходный код кендо и использовал ваш код в локальном проекте с кучей console.log(), и вот что я нашел:

(Интересующие методы — _drag() и _movePlaceholder() класса Sortable)

Вот как кендо решает, показывать ли заполнитель (вызов _movePlaceholder()) внутри _drag():

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';, и «Перетащите сюда» появится в «предыдущем» месте (над первым элементом).

Переменная moveOnDragEnter кажется недокументированной опцией, которую вы можете установить в значение true в своей сортируемой инициализации, чтобы переопределить проверку offsetDelta, НО если вы установите ее, это приведет к тому, что «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
}

...или просто примите ограничение.

person The Dread Pirate Stephen    schedule 07.12.2016