HTML перетягування на мобільних пристроях

Коли ви додаєте перетягування на веб-сторінку за допомогою JavaScript, наприклад jQuery UI, який можна перетягнути та випасти, як це працює, коли переглядається через браузер на мобільному пристрої - де дії сенсорного екрану для перетягування перехоплюються телефон для прокрутки сторінки тощо?

Всі рішення вітаються ... мої початкові думки:

1. Майте кнопку для мобільних пристроїв, яка "піднімає" предмет, який потрібно перетягнути, а потім змусьте їх натиснути зону, куди вони хочуть скинути предмет.

2. Напишіть програму, яка робить це для мобільних пристроїв, а не намагайтеся, щоб веб-сторінка працювала на них!

3. Ваші пропозиції та коментарі, будь ласка.

jQuery UI Touch Punch просто вирішує все це.

Це підтримка сенсорних подій для інтерфейсу jQuery. В основному, це просто підключає подію дотику до інтерфейсу jQuery. Тестується на iPad, iPhone, Android та інших мобільних пристроях із підтримкою дотику. Я використовував jQuery UI для сортування, і це працює як шарм.

http://touchpunch.furf.com/

Існує новий поліфіл для перекладу подій дотику на перетягування, так що перетягування HTML5 Drag And Drop можна використовувати на мобільних пристроях.

Поліфайл був представлений Бернардо Кастільйо на цій посаді .

Ось демонстрація з цього допису.

У цій публікації також представлено декілька міркувань щодо конструкції фоліфлі.

Бета-версія Sencha Touch має підтримку перетягування.

Ви можете звернутися до їхнього прикладу DnD . Це, до речі, працює лише у браузерах webkit.

Модернізація цієї логіки на веб-сторінці, мабуть, буде важкою. Наскільки я розумію, вони відключають усі панорамування браузера та реалізують події панорамування повністю у javascript, дозволяючи правильну інтерпретацію перетягування.

Оновлення: оригінальний приклад посилання мертвий, але я знайшов цю альтернативу:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Мені потрібно було створити перетягування + обертання, яке працює на настільному ПК, мобільному телефоні, планшеті, включаючи Windows Phone. Останній ускладнив (mspointer проти сенсорних подій).

Рішення надійшло від великої бібліотеки Greensock

Потрібно було трохи стрибків через обручі, щоб зробити той самий об’єкт перетяжним і поворотним, але він працює ідеально

Ви також можете спробувати полі- заповнювач перетягування, який , звичайно, схожий на той, що був у Бернардо Кастільйо (див. Відповідь @remdevtec).

Просто зробіть npm install mobile-drag-drop --save(доступні інші способи встановлення, наприклад, з водонагрівачем)

Потім, будь-який інтерфейс елемента, який покладається на виявлення дотику, повинен працювати на мобільному (наприклад, перетягування лише елемента, замість прокрутки + перетягування одночасно).

Jquery Touch Punch чудовий, але він також вимикає всі елементи керування на перетягуваному div, щоб запобігти цьому, вам доведеться змінити рядки ... (на момент написання - рядок 75)

змінити

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

читати

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

додати скільки завгодно ор для кожного з елементів, який потрібно "розблокувати"

Надія, що комусь допомагає

ось моє рішення:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

Бібліотека JS, що сортується , сумісна з сенсорними екранами і не вимагає jQuery.

Те, як він обробляє сенсорні екрани, означає, що вам потрібно торкнутися екрана приблизно 1 секунду, щоб почати перетягувати елемент.

Також вони представляють відеотест, який показує, що ця бібліотека працює швидше, ніж JQuery UI Sortable.