Przeciągnij i upuść HTML na urządzeniach mobilnych

Po dodaniu funkcji przeciągnij i upuść do strony internetowej za pomocą JavaScript, takiego jak interfejs użytkownika jQuery, który można przeciągać i upuszczać, w jaki sposób to działa podczas przeglądania w przeglądarce na urządzeniu mobilnym - gdzie czynności przeciągania na ekranie dotykowym są przechwytywane przez telefon do przewijania strony itp.?

Wszystkie rozwiązania mile widziane ... moje wstępne przemyślenia to:

1. Posiada przycisk dla urządzeń mobilnych, który „podnosi” element do przeciągnięcia, a następnie każe im kliknąć strefę, w której chcą upuścić element.

2. Napisz aplikację, która zrobi to na urządzenia mobilne, zamiast spróbować uruchomić na nich stronę internetową!

3. Proszę o Twoje sugestie i uwagi.

jQuery UI Touch Punch po prostu rozwiązuje to wszystko.

Jest to obsługa zdarzeń dotykowych dla interfejsu użytkownika jQuery. Zasadniczo po prostu przekazuje zdarzenie dotykowe z powrotem do interfejsu użytkownika jQuery. Przetestowano na iPadzie, iPhonie, Androidzie i innych dotykowych urządzeniach mobilnych. Użyłem sortable jQuery UI i działa to jak urok.

http://touchpunch.furf.com/

Jest nowy polyfill do tłumaczenia zdarzeń dotykowych na przeciągnij i upuść, tak że HTML5 Drag and Drop jest możliwy do wykorzystania na urządzeniach mobilnych.

Wypełnienie polyfill zostało wprowadzone przez Bernardo Castilho w tym poście .

Oto demo z tego postu.

W poście przedstawiono również kilka kwestii związanych z projektem wypełnienia.

Wersja beta Sencha Touch obsługuje przeciąganie i upuszczanie.

Możesz zapoznać się z ich przykładem DnD . Nawiasem mówiąc, działa to tylko w przeglądarkach webkit.

Modyfikacja tej logiki na stronie internetowej prawdopodobnie będzie trudna. Jak rozumiem, wyłączają wszystkie przesuwanie przeglądarki i implementują zdarzenia przesuwania całkowicie w javascript, umożliwiając poprawną interpretację przeciągania i upuszczania.

Aktualizacja: oryginalny przykładowy link jest martwy, ale znalazłem tę alternatywę:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Musiałem stworzyć przeciągnij i upuść + obrót, który będzie działał na komputerze stacjonarnym, telefonie komórkowym, tablecie, w tym telefonie z systemem Windows. Ta ostatnia skomplikowała sprawę (mspointer vs. zdarzenia dotykowe).

Rozwiązanie pochodzi z Wielkiej biblioteki Greensock

Potrzeba było trochę przeskoczenia przez obręcze, aby ten sam obiekt można było przeciągać i obracać, ale działa idealnie

Równie dobrze możesz spróbować polyfill Tima Ruffle'a przeciągnij i upuść , z pewnością podobny do tego, który wykonał Bernardo Castilho (patrz odpowiedź @remdevtec).

Po prostu zrób npm install mobile-drag-drop --save(inne dostępne metody instalacji, np. Z altaną)

Wtedy każdy interfejs elementu opierający się na wykrywaniu dotyku powinien działać na telefonie komórkowym (np. Przeciąganie samego elementu, zamiast przewijania i przeciągania w tym samym czasie).

Jquery Touch Punch jest świetny, ale to, co robi, to również wyłączenie wszystkich kontrolek na przeciąganym div, więc aby temu zapobiec, musisz zmienić linie ... (w momencie pisania - linia 75)

zmiana

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

czytać

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

dodaj tyle orów, ile chcesz dla każdego elementu, który chcesz „odblokować”

Mam nadzieję, że to komuś pomoże

oto moje rozwiązanie:

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

Biblioteka Sortable JS jest kompatybilna z ekranami dotykowymi i nie wymaga jQuery.

Sposób obsługi ekranów dotykowych polega na tym, że aby rozpocząć przeciąganie elementu, musisz dotykać ekranu przez około 1 sekundę.

Przedstawiają również test wideo pokazujący, że ta biblioteka działa szybciej niż JQuery UI Sortable.