HTML Drag and Drop на мобильных устройствах

Question

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

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

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

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

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

Answer 1

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

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

http://touchpunch.furf.com/

Answer 2

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

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

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

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

Answer 3

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

Решение пришло от Великой библиотеки Greensock

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

Answer 4

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

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

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

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

Answer 5

Вы также можете попробовать Полифилл с перетаскиванием Тима Руффла , конечно, похожий на Бернардо Кастильо (см. @Remdevtecответ).

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

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

Answer 6

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') {

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

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

Answer 7

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

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

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

Answer 8

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

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