Возможно ли включить сортировку во время touchstart?

Question

[Кирилл Белаш]

Суть задачи, есть список sortable, реально ли запускать сортировку пока мы держим палец и выполняется событие touchstart? Например библиотека sortable.js не стартует если зажать и держать палец. Понятно, что поток заблочен событием, но как выбить вне потока и начать сортировку?

Answer 1

[Данила]

Вместо того чтобы полностью полагаться на touchstart, используйте его для начала подготовки, но инициализируйте сортировку с помощью других событий, например touchmove. При этом стоит ограничить область touchmove, чтобы сортировка не начиналась до явного движения пальцем. Также нужно вручную инициировать сортировку.

var sortable = new Sortable(listElement, {
    animation: 150,
    onStart: function (evt) {
        console.log('Начало сортировки');
    }
});

listElement.addEventListener('touchstart', function (e) {
    var touch = e.touches[0];
    var targetElement = document.elementFromPoint(touch.clientX, touch.clientY);

    sortable._onDragStart({
        target: targetElement,
        clientX: touch.clientX,
        clientY: touch.clientY,
        type: 'touchstart'
    });
}, false);

Comments

[Кирилл Белаш]

не совсем понятно что за функция драгстарт, вроде у библиотеки такой не находил

[Данила]

Пардон, спутал с другой библиотекой. Тогда придётся по-другому действовать. Поскольку sortable.js не поддерживает явное начало сортировки на touchstart, можно запустить сортировку при касании, используя логику из событий touchmove и touchend:

var sortable = new Sortable(listElement, {
    animation: 150,
    onStart: function (evt) {
        console.log('Начало сортировки');
    }
});

let isDragging = false;
let initialTouch = null;

listElement.addEventListener('touchstart', function (e) {
    initialTouch = e.touches[0];
    isDragging = false;
});

listElement.addEventListener('touchmove', function (e) {
    if (!isDragging) {
        let touch = e.touches[0];
        let deltaX = Math.abs(touch.clientX - initialTouch.clientX);
        let deltaY = Math.abs(touch.clientY - initialTouch.clientY);
        
        if (deltaX > 10 || deltaY > 10) {
            isDragging = true;
            sortable.option("disabled", false);
        }
    }
});

listElement.addEventListener('touchend', function () {
    isDragging = false;
    sortable.option("disabled", true);
});

[Кирилл Белаш]

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

[Данила]

Кирилл Белаш, используйте preventdefault в комбинации с проверкой движения пальца, чтобы не блокировать прокрутку страницы. Можно также включать и отключать сортировку на основе движения пальца, чтобы предотвратить случайное блокирование. Или на крайняк использовать пассивные обработчики для touchstart и touchmove, которые позволяют браузеру управлять событиями лучше, не блокируя стандартное поведение.

var sortable = new Sortable(listElement, {
    animation: 150,
    onStart: function (evt) {
        console.log('Начало сортировки');
    }
});

let isDragging = false;
let initialTouch = null;
let moved = false;

listElement.addEventListener('touchstart', function (e) {
    initialTouch = e.touches[0];
    isDragging = false;
    moved = false;
}, { passive: true });

listElement.addEventListener('touchmove', function (e) {
    let touch = e.touches[0];
    let deltaX = Math.abs(touch.clientX - initialTouch.clientX);
    let deltaY = Math.abs(touch.clientY - initialTouch.clientY);

    if (!isDragging && (deltaX > 10 || deltaY > 10)) {
        isDragging = true;
        moved = true;
        e.preventDefault();
        sortable.option("disabled", false);
    }
}, { passive: false });

listElement.addEventListener('touchend', function () {
    if (moved) {
        isDragging = false;
        sortable.option("disabled", true);
    }
    moved = false;
}, { passive: true });

[Кирилл Белаш]

Данила, да так работает, но все же остается контекстное меню при попытки потащить элемент

[Данила]

Кирилл Белаш, добавьте дополнительное предотвращение стандартных действий браузера для событий touchstart и contextmenu

var sortable = new Sortable(listElement, {
    animation: 150,
    onStart: function (evt) {
        console.log('Начало сортировки');
    }
});

let isDragging = false;
let initialTouch = null;
let moved = false;

listElement.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

listElement.addEventListener('touchstart', function (e) {
    initialTouch = e.touches[0];
    isDragging = false;
    moved = false;
}, { passive: true });

listElement.addEventListener('touchmove', function (e) {
    let touch = e.touches[0];
    let deltaX = Math.abs(touch.clientX - initialTouch.clientX);
    let deltaY = Math.abs(touch.clientY - initialTouch.clientY);

    if (!isDragging && (deltaX > 10 || deltaY > 10)) {
        isDragging = true;
        moved = true;
        e.preventDefault();
        sortable.option("disabled", false);
    }
}, { passive: false });

listElement.addEventListener('touchend', function () {
    if (moved) {
        isDragging = false;
        sortable.option("disabled", true);
    }
    moved = false;
}, { passive: true });

[Кирилл Белаш]

Данила, да точно, можно же контекст запретить, спасибо так работает