Когда вы добавляете перетаскивание на веб-страницу с помощью JavaScript, такого как jQuery UI с возможностью перетаскивания и удаления, как вы можете заставить это работать при просмотре через браузер на мобильном устройстве, когда действия сенсорного экрана для перетаскивания перехватываются телефон для перелистывания страницы и тд?
Все решения приветствуются ... мои первоначальные мысли:
Имейте кнопку для мобильных устройств, которая «поднимает» элемент, который нужно перетащить, а затем заставляет их щелкнуть зону, в которой они хотят сбросить элемент.
Напишите приложение, которое сделает это для мобильных устройств, а не пытайтесь заставить веб-страницу работать на них!
Ваши предложения и комментарии, пожалуйста.
Ответы:
jQuery UI Touch Punch решает все проблемы.
Это поддержка Touch Event для пользовательского интерфейса 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 vs. touch events).
Решение пришло из великой библиотеки 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'); } });источник
Библиотека Sortable JS совместима с сенсорными экранами и не требует jQuery.
То, как он обрабатывает сенсорные экраны, заключается в том, что вам нужно коснуться экрана примерно на 1 секунду, чтобы начать перетаскивать элемент.
Кроме того, они представляют видео-тест, показывающий, что эта библиотека работает быстрее, чем JQuery UI Sortable.
источник