Перетаскивание HTML на мобильных устройствах

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

Все решения приветствуются... мои первые мысли:

  1. У вас есть кнопка для мобильных устройств, которая "поднимает" перетаскиваемый элемент, а затем заставляет их щелкнуть зону, в которую они хотят перетащить элемент.

  2. Напишите приложение, которое делает это для мобильных устройств, а не пытайтесь заставить веб-страницу работать на них!

  3. Ваши предложения и комментарии, пожалуйста.

ОТВЕТЫ

Ответ 1

jQuery UI Touch Punch просто решает все это.

Поддержка Touch Event для jQuery UI. В принципе, он просто передает событие touch обратно в jQuery UI. Протестировано на iPad, iPhone, Android и других мобильных устройствах с сенсорным экраном. Я использовал jQuery UI sortable и работает как шарм.

http://touchpunch.furf.com/

Ответ 2

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

Полифилл был представлен Бернардо Кастильо на этом посте.

Вот демо из этого поста.

В посте также представлены некоторые соображения о дизайне фолифилла.

Ответ 3

Бета-версия Sencha Touch поддерживает перетаскивание.

Вы можете ссылаться на их пример DnD. Кстати, это работает только в браузерах webkit.

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

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

Ответ 4

Мне нужно было создать перетаскивание + поворот, который работает на настольном, мобильном, планшете, включая Windows-телефон. Последний сделал его более сложным (события mspointer и touch).

Решение взято из Большой библиотеки Greensock

Потребовалось несколько прыжков через обручи, чтобы сделать тот же объект перетаскиваемым и вращающимся, но он отлично работает

Ответ 5

JQuery Touch Punch отлично, но то, что он также делает, отключает все элементы управления divgable 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') {

добавьте столько орлов, сколько хотите для каждого из элементов, которые вы хотите "разблокировать"

Надеюсь, что кто-то поможет

Ответ 6

С тем же успехом вы можете попробовать тим Раффл, перетаскивающий полифилл, точно такой же, как у Бернардо Кастильо (см. ответ @remdevtec).

Просто сделайте npm install mobile-drag-drop --save (доступны другие способы установки, например, с беседкой)

Затем любой интерфейс элемента, основанный на обнаружении касания, должен работать на мобильном телефоне (например, перетаскивание только элемента вместо одновременной прокрутки + перетаскивания).

Ответ 7

вот мое решение:

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

Ответ 8

Сортируемая библиотека JS совместима с сенсорными экранами и не требует jQuery.

То, как он работает с сенсорными экранами, это то, что вам нужно дотронуться до экрана примерно на 1 секунду, чтобы начать перетаскивание элемента.

Кроме того, они представляют видео-тест, показывающий, что эта библиотека работает быстрее, чем JQuery UI Sortable.