Когда вы добавляете перетаскивание на веб-страницу с помощью JavaScript, например, jQuery UI draggable и droppable, как вы это можете использовать при просмотре через браузер на мобильном устройстве, - где действия сенсорного экрана для перетаскивания перехватывается телефоном для прокрутки страницы и т.д.
Все решения приветствуются... мои первоначальные мысли:
У вас есть кнопка для мобильных устройств, которая "поднимает" элемент, который нужно перетащить, а затем заставит их щелкнуть зону, в которую они хотят сбросить элемент.
Напишите приложение, которое делает это для мобильных устройств, а затем попытайтесь заставить веб-страницу работать с ними!
Ваши предложения и комментарии.
ОБНОВЛЕНИЕ: Bounty
Если кто-то скажет мне, как сделать перетаскивание на веб-странице на мобильном устройстве, не прибегая к пунктам 1 и 2 выше, я буду качать замечательную награду в размере 50 повторений на вашем пути!
jQuery UI Touch Punch просто решает все это.
Поддержка Touch Event для jQuery UI. В принципе, он просто передает событие touch обратно в jQuery UI. Протестировано на iPad, iPhone, Android и других мобильных устройствах с сенсорным экраном. Я использовал jQuery UI sortable и работает как шарм.
Для людей, читающих это с 2017 года, существует новый polyfill для перевода событий касания к перетаскиванию, так что HTML5 Drag And Drop можно использовать на мобильных устройствах.
polyfill был представлен Бернардо Кастильо на этот пост.
Здесь demo из этой публикации.
В сообщении также приводятся несколько соображений дизайна фолиевой засыпки.
Мне нужно было создать перетаскивание + поворот, который работает на настольном, мобильном, планшете, включая Windows-телефон. Последний сделал его более сложным (события mspointer и touch).
Решение взято из Большой библиотеки Greensock
Потребовалось несколько прыжков через обручи, чтобы сделать тот же объект перетаскиваемым и вращающимся, но он отлично работает
Бета-версия Sencha Touch поддерживает перетаскивание.
Вы можете ссылаться на их пример DnD. Кстати, это работает только в браузерах webkit.
Доработка этой логики на веб-странице, вероятно, будет сложной. Насколько я понимаю, они отключают все панорамирование браузера и полностью реализуют события панорамирования в javascript, что позволяет правильно интерпретировать перетаскивание.
Обновление: ссылка на оригинальный пример мертва, но я нашел эту альтернативу:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch
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') {
добавьте столько орлов, сколько хотите для каждого из элементов, которые вы хотите "разблокировать"
Надеюсь, что кто-то поможет
вот мое решение:
$(el).on('touchstart', function(e) {
var link = $(e.target.parentNode).closest('a')
if(link.length > 0) {
window.location.href = link.attr('href');
}
});