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

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

все решения Рады... мои первоначальные мысли:

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

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

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

обновление: Баунти

Если кто-то может сказать мне, как сделать работу перетаскивания на веб-странице на мобильном устройстве, не прибегая к точкам 1 и 2 выше, я буду качать замечательную щедрость 50 rep твой путь!

7 79
javascript html jquery-ui-sortable mobile-devices

7 ответов:

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

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

http://touchpunch.furf.com/

94

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

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

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

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

19

бета-версии Сенча Touch имеет поддержку перетаскивания.

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

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

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

7

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

решение пришло от великого библиотека Greensock

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

7

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

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

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

1

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

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

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

1

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

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