Szukam wtyczki drag & DROP działającej na urządzeniach dotykowych.
Chciałbym mieć podobną funkcjonalność do wtyczki jQuery UI, która pozwala na "upuszczanie" elementów.
Jqtouch wtyczki podpór przeciąganie, ale nie spada.
Oto przeciągnij i upuść, który obsługuje tylko iPhone / iPad.
Czy ktoś może wskazać mi kierunek wtyczki przeciągnij i upuść, która działa na Androidzie / iOS?
... Lub może być możliwe zaktualizowanie wtyczki jqtouch pod kątem możliwości upuszczania, działa już na Andriod i IOS.
Dzięki!
Odpowiedzi:
Możesz użyć interfejsu użytkownika Jquery do przeciągania i upuszczania z dodatkową biblioteką, która tłumaczy zdarzenia myszy na dotyk, czego potrzebujesz, biblioteka, którą polecam to https://github.com/furf/jquery-ui-touch-punch , z to przeciąganie i upuszczanie z interfejsu Jquery powinno działać na urządzeniach dotykowych
lub możesz użyć tego kodu, którego używam, konwertuje on również zdarzenia myszy na dotyk i działa jak magia.
W swoim dokumencie już po prostu wywołaj funkcję init ()
kod znaleziony stąd
źródło
document.getElementById('draggableContainer').addEventListener(...
Dla każdego, kto chce z tego skorzystać i zachować funkcję `` kliknięcia '' (jak wspomina John Landheer w swoim komentarzu), możesz to zrobić za pomocą zaledwie kilku modyfikacji:
Dodaj kilka globalnych:
Następnie zmień instrukcję switch z oryginalnej na następującą:
Możesz dostosować „kliknięcia” do swoich upodobań. Zasadniczo jest to po prostu obserwacja „touchstartu”, a następnie szybkiego „dotknięcia”, aby zasymulować kliknięcie.
źródło
click
działa, a czasami nie ???Dzięki za powyższe kody! - Wypróbowałem kilka opcji i to był bilet. Miałem problemy z tym, że disableDefault uniemożliwiało przewijanie na iPadzie - testuję teraz elementy do przeciągania i na razie działa świetnie.
źródło
Miałem to samo rozwiązanie, co odpowiedź gregpress , ale moje elementy do przeciągania używały klasy zamiast identyfikatora. Wydaje się, że działa.
źródło
Stary wątek, który znam .......
Problem z odpowiedzią @ryuutatsuo polega na tym, że blokuje on również wszelkie dane wejściowe lub inny element, który ma reagować na „kliknięcia” (na przykład wejścia), więc napisałem to rozwiązanie. To rozwiązanie umożliwiło użycie dowolnej istniejącej biblioteki przeciągnij i upuść opartej na zdarzeniach mousedown, mousemove i mouseup na dowolnym urządzeniu dotykowym (lub komputerze). Jest to również rozwiązanie dla różnych przeglądarek.
Przetestowałem na kilku urządzeniach i działa szybko (w połączeniu z funkcją przeciągnij i upuść w ThreeDubMedia (patrz także http://threedubmedia.com/code/event/drag )). Jest to rozwiązanie jQuery, więc możesz go używać tylko z bibliotekami jQuery. Użyłem do tego jQuery 1.5.1 , ponieważ niektóre nowsze funkcje nie działają poprawnie z IE9 i nowszymi (nie testowane z nowszymi wersjami jQuery).
Przed dodaniem operacji przeciągnij lub upuść do zdarzenia musisz najpierw wywołać tę funkcję :
Możesz również zablokować wszystkie składniki / elementy podrzędne na potrzeby wprowadzania danych lub przyspieszyć obsługę zdarzeń, używając następującej składni:
Oto kod, który napisałem. Użyłem kilku fajnych sztuczek, aby przyspieszyć ocenę rzeczy (patrz kod).
Co robi: Na początku tłumaczy zdarzenia pojedynczego dotknięcia na zdarzenia myszy. Sprawdza, czy zdarzenie jest spowodowane przez element znajdujący się na / w elemencie, który należy przeciągać. Jeśli jest to element wejściowy, taki jak input, textarea itp., Pomija tłumaczenie lub jeśli jest do niego dołączone standardowe zdarzenie myszy, również pomija tłumaczenie.
Wynik: każdy element elementu, który można przeciągać, nadal działa.
Miłego kodowania, pozdrawiam, Erwin Haantjes
źródło
simulateTouchEvents(<object>, true);
???touch
wydarzeń w programiechrome
nie mogę przewijać tabeli. Nawet na telefonie komórkowym.