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


91

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.


Na jakie urządzenia kierujesz reklamy?
Marko,

22
@Marko - wszyscy. To nie jest Sieć, jeśli kogokolwiek wykluczę.
Fenton

Jeśli w ogóle nie chcesz jQuery, zajrzyj na ten github.com/capriza/mobile-touch
oriharel

Odpowiedzi:


101

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/


4
Nie działa w standardowej przeglądarce Androida 4.0. Działa jednak w mobilnej przeglądarce Chrome.
Timmmm

czy mamy długie naciśnięcie przed przeciągnięciem? ponieważ kiedy użyliśmy pełnej szerokości w elemencie, który można przeciągać, chcemy przewinąć do dołu, automatycznie przeciąga element
CaffeineShots

1
upewnij się, aby ten ostatni <script> oświadczenie w głowie pliku HTML, zwłaszcza jQuery UI, albo nie będzie działać
whyoz

@vichsu Bardzo dziękuję za tę odpowiedź, która po prostu doskonale rozwiązała mój problem.
Brady Zhu,

naprawdę nie działa w systemie Android 4.0 ... czy jest jakieś obejście?
rashidnk

23

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.


7

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


To jest bardzo ciekawe, więc ściągnę to i pobawię - przetestowane na Androidzie i to w większości działa, więc wystarczy spojrzeć na szczegóły - dzięki!
Fenton,

6
Okej, prawdopodobnie nie użyję tej biblioteki w szczególności (a po zminimalizowaniu ma ponad 200k), ale mogę użyć zawartych w niej koncepcji, aby uzyskać taki pomysł. Ogólną ideą jest to, że Twoja strona nie może być interpretowana jako większa niż rozmiar ekranu, co oszukuje przeglądarkę mobilną, aby nie przechwytywała przeciągnięć / przeciągnięć!
Fenton,

1
Sohnee, dodajemy kreator dla Touch 1.0, który usuwa nieużywane części biblioteki, co znacznie zmniejszy ślad. Poza tym pełna biblioteka ma rozmiar 50-80 KB.
Michael Mullany

7

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


Rodzaj licencji? Wolny? Sprawdziłem witrynę, ale wygląda na to, że sprzedają bibliotekę.
ShanerM13

Minęło 6 lat odkąd na to odpowiedziałem. Nie jestem pewien, czy zmienili typ licencji. Kiedyś był wolny w 2014 roku ...
Tomer Almog

IDK, jak to przeoczyłem, ale greensock.com/licensing
ShanerM13

Zasadniczo jest bezpłatny, pod warunkiem, że Twój produkt jest bezpłatny (z wyjątkiem tego, że zezwalają na jednorazowe opłaty), w przeciwnym razie musisz uzyskać licencję biznesową z nimi.
ShanerM13

3

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).


1

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


Bardzo mi to pomogło, dziękuję. Tworzyłem listę kontrolną z możliwością sortowania, a pole wyboru nie klikało, ponieważ element div utworzony przez touch-punch zasłaniał pole wyboru. To rozwiązało problem i zadziałało. dzięki ....
Mikeys4u

1

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');
    }
});

1

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.