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

91

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

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

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

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

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

Фентон
источник
На какие устройства вы ориентируетесь?
Marko
22
@Marko - все они. Если я исключу кого-то, это не Интернет.
Fenton
Если вам вообще не нужен jQuery, взгляните на этот github.com/capriza/mobile-touch
oriharel

Ответы:

101

jQuery UI Touch Punch решает все проблемы.

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

http://touchpunch.furf.com/

Вичсу
источник
4
Не работает в стандартном браузере Android 4.0. Тем не менее, он работает в мобильном Chrome.
Timmmm
у нас сначала долгое нажатие перед перетаскиванием? потому что, когда мы использовали полную ширину в элементе, который можно перетаскивать, тогда мы хотим прокрутить его вниз, он автоматически перетаскивает элемент
CaffeineShots
1
обязательно сделайте это последнее объявление <script> в
заголовке
@vichsu Большое спасибо за этот ответ, который отлично решил мою проблему.
Brady Zhu
действительно не работает в андроид 4.0 .. или есть какой обходной путь?
rashidnk
23

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

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

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

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

remdevtec
источник
7

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

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

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

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

Йери Себрехтс
источник
Это очень интересно, поэтому я скачаю его и протестирую на Android, и в основном он работает, так что просто нужно изучить детали - спасибо!
Fenton
6
Хорошо, я, вероятно, не буду использовать эту библиотеку в частности (что с ее размером более 200 КБ при минификации), но я могу использовать концепции, содержащиеся в ней, чтобы получить такую ​​идею. Общая идея заключается в том, что ваша страница не может быть интерпретирована как размер, превышающий размер экрана, что обманывает мобильный браузер и заставляет его не перехватывать свайпы / перетаскивания!
Fenton
1
Sohnee, мы добавляем конструктор для Touch 1.0, который удаляет неиспользуемые части библиотеки, что существенно снизит занимаемую площадь. Кроме того, в сжатом виде полная библиотека составляет 50-80k.
Майкл Маллани 01
7

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

Решение пришло из великой библиотеки Greensock.

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

Томер Альмог
источник
Тип лицензии? Свободно? Я заглянул на сайт, но похоже, что они продают библиотеку.
ShanerM13
Прошло 6 лет с тех пор, как я ответил на это. Я не уверен, изменили ли они тип лицензии. Раньше это было бесплатно в 2014 году ...
Томер Альмог,
IDK, как я это не заметил
ShanerM13,
По сути, это бесплатно при условии, что ваш продукт бесплатный (за исключением того, что они разрешают одноразовую плату), в противном случае вы должны получить с ними бизнес-лицензию.
ShanerM13,
3

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

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

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

Морозный Z
источник
1

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

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

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

тедбейкер
источник
Это определенно помогло мне, спасибо. Я создавал сортируемый контрольный список, и флажок не щелкнул, так как div, созданный с помощью сенсорного ввода, закрыл флажок. Это решило проблему, и это сработало. спасибо ....
Mikeys4u
1

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

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});
Альпер Айдингюль
источник
1

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

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

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

Zoup
источник