Как правильно перетаскивать элементы?

Question

[Артур Кудашев]

Здравствуйте, делаю dnd для телефона и все работает нормально, кроме одного момента. Есть список задач который можно скролить вверх и вниз и когда я его скролю, то элементы начинают перетаскиваться. Возможно ли как-то отследить, что пользователь зажал кнопку более секунды и только потом перетаскивать, чтобы не было случайных перетаскиваний? Вот сам проект: https://art-kudashev.github.io/kanban/

Answer 1

[ⓒⓢⓢ]

1. Читаем:
touchstart, touchmove, touchend
2. На событие "touchstart" запускаем таймер на, секунду.
3. Если сработал таймер значит это "зажал".
4. Если во время работы таймера пришло событие "touchmove" или "touchend", - Удаляем таймер.
Это значит не "зажал", а что-то другое, - например, клик, скролл и т.д.

Comments

[Сергей delphinpro]

debouncing

[ⓒⓢⓢ]

Сергей delphinpro, спасибо, тоже можно рассмотреть вариант.
Но если честно, то мне кажется, такая оптимизация тут не нужна. Всё выполняется единожды.
Поставили таймер, если произошли другие касательные события - то удалили и таймер, и эти обработчики - это не наше "зажатие"

[Сергей delphinpro]

JRK_DV, то что описал JRK_DV называется дебаунсингом.
у вас dnd это не разовая операция, вы в любой момент можете начать перетаскивание. Чтобы не путать со скроллом, вы делаете дебаунс на начало перетаскивания.

[Сергей delphinpro]

тьфу, блин, показалось автор вопроса написал коммент. ну не важно.

[Артур Кудашев]

Сергей delphinpro, мне не совсем он нужен. При debouncing функция все равно выполниться. Мне нужно чтобы если пользователь не зажимает элемент на 1 сек, то переноса не будет

[Артур Кудашев]

JRK_DV, я не совсем понял как реализовать ваше решение. Можете подробно объяснить?

[Stalker_RED]

Артур Кудашев, там примеры есть же

[ⓒⓢⓢ]

Можете подробно объяснить?

Артур Кудашев, возможно так понятнее будет https://codepen.io/anon/pen/KLByXP?editors=0010

[Артур Кудашев]

JRK_DV, спасибо