Technologia przeciągnij i upuść w systemie Android. Technika przeciągania i upuszczania przy użyciu jQuery Co to jest przeciąganie i upuszczanie

Łatwiej jest coś wziąć i umieścić niż napisać, co trzeba wziąć i gdzie to umieścić. Oczywiście bez myszy lub podobnego urządzenia nie można niczego zaznaczyć ani określić, ale nawet w obecnym stanie rzeczy korzystanie z idei przeciągania i upuszczania jest bardzo naturalne i wygodne.

Zakres idei to nie tylko sklepy internetowe, biblioteki cyfrowe, systemy wyszukiwania czy informacyjne, ale także sfera stosowana. Pomysł ma bardzo duże zastosowanie w rozwoju witryn i ich elementów, tworzonych i utrzymywanych interaktywnie, bez udziału programisty.

Opis pomysłu

Wybierz, przenieś i połóż - pomysł jest naturalny i wygodny. To po prostu niesamowite, że nie narodziła się, gdy myszka stała się nieodzownym akcesorium do komputera.

Najbardziej oczywistym przykładem jest wybór produktu w sklepie internetowym. Wybierz żądany produkt za pomocą myszy i przeciągnij go do koszyka - prosto, naturalnie i wygodnie. Przesyłanie pliku: Wyjęcie dokumentu poza okno przeglądarki i umieszczenie go na elemencie strony, a tym samym zainicjowanie transferu dokumentu na serwer, to również praktyczny pomysł.

Dla programisty idea „przeciągnij i upuść” to manipulacja elementami strony bez ręcznego przeliczania współrzędnych i rozmiarów tagów, możliwość zaznaczania wielu elementów i wyrównywania ich oraz przesuwania boków tagów blokowych.

HTML i CSS to doskonałe języki do opisywania tagów i ich stylizacji, ale gdy programista jest w stanie interaktywnie manipulować elementami strony bez ręcznego przeliczania współrzędnych i rozmiarów, praca jest wygodniejsza i wydajniejsza.

Łatwy transfer plików

„Przeciągnij i upuść”: tłumaczenie z angielskiego na rosyjski dosłownie brzmi jak „przeciągnij i upuść”. W praktyce brzmi i działa lepiej: wybrał, przeniósł i puścił – prosto i naturalnie.

Implementacja przesyłania plików ze strony na stronę, na serwer lub w inny sposób jest bardzo prosta.

W ten przykład Kilka plików na pulpicie zostało wybranych za pomocą myszy (rysunek po lewej). Na zaznaczeniu wciśnięto lewy przycisk myszy i wybrany „przeszedł” do koszyka. Sama przeglądarka pokazała, jak to się dzieje, napisała podpowiedź „kopiuj” i utworzyła kontury przenoszonych plików.

Kiedy mysz znalazła się nad koszem, gość puścił lewy przycisk myszy, miało miejsce zdarzenie przeciągnij i upuść, a na stronie witryny (dolny obraz) kod JavaScript był w stanie odebrać i przetworzyć wszystkie pliki, które odwiedzający dostarczył na stronę (witrynę).

Opis wdrożenia

Kod wykonujący tę procedurę jest bardzo prosty. Nawet początkujący programista może to powtórzyć w dowolnych przypadkach użycia.

Tutaj interfejs użytkownika jest reprezentowany przez dwa znaczniki: scPlaceFile (jest to sam koszyk, w którym chcesz umieścić pliki) oraz scPlaceFiles (jest to wynik przetwarzania plików, w tym przypadku ich lista).

Logika strony jest następująca. Po załadowaniu strony w przeglądarce, w koszyku przypisywana jest obsługa zdarzeń "ondrop" - put, reszta zdarzeń jest blokowana i nie jest używana.

Strona działa normalnie, ale gdy tylko odwiedzający wybierze plik (pliki) i przeciągnie go do obrazu koszyka, czyli do tagu scPlaceFile, zostanie przetworzone zdarzenie „pliki dotarły”.

Ten program obsługi po prostu wyświetla listę plików. Ich liczba znajduje się w event.dataTransfer.files.length, a informacje o każdym pliku znajdują się w event.dataTransfer.files[i].name. Co zrobić z otrzymanymi danymi, określa programista, w tym przypadku po prostu tworzona jest lista otrzymanych plików.

Po przetworzeniu zdarzenie jest blokowane i nie jest propagowane. Jest to konieczne, aby przeglądarka nie angażowała się w działania amatorskie i nie przeszkadzała w przetwarzaniu otrzymanych informacji.

DnD i dane zewnętrzne

Przesyłanie obrazów na serwer metodą „przeciągnij i upuść” to powszechna praktyka w tej technologii. Zazwyczaj programista tworzy formularz przesyłania plików (1), który działa w zwykły sposób (2). Odwiedzający może zwykle wybrać pliki i przesłać je.

Jeśli jednak odwiedzający przeciągnie i upuści się w określone miejsce formularza, to pole nazwy pliku (plików) zostanie wypełnione automatycznie.

Ten dobra decyzja. Oczywiście bardzo trudno przyznać, że na komputerze nie ma myszy. Ale lepiej zaprojektować interfejs użytkownika w zwykła wersja oraz we wdrażaniu DnD.

DnD i dane wewnętrzne

Dbanie o interesy gościa jest zawsze ważne, ale liczą się też obawy dewelopera. Możesz zaimplementować „przeciągnij i upuść” nie tylko standardowymi środkami, ale także obsługując zdarzenia myszy na elementach strony.

Zadanie obliczania wartości współrzędnych tagów i ich rozmiarów pojawia się stale. Ręczne obliczanie jest dobrą praktyką, ale opcja interaktywna jest wygodniejsza. Wszystkie tagi mają zawsze kształt prostokąta, a monitorując zdarzenia myszy po bokach elementów, możesz stworzyć możliwość automatycznego przesuwania elementów w odpowiednie miejsce na stronie lub ich zmiany.

Obsługa zdarzenia kliknięcia przyciskiem myszy - zapamiętywanie współrzędnych miejsca kliknięcia, np. jednego z boków elementu. Poruszaj myszą - bok przesuwa się w żądanym kierunku. Puszczenie przycisku myszy - bok się zatrzymuje i zmienia się jego współrzędne. W ten sposób możesz zmienić położenie elementu lub jego rozmiar.

Formalnie nie jest to przeciąganie i upuszczanie, ale efekt jest podobny i praktyczny. Tworząc uniwersalne programy obsługi dla dowolnego elementu strony, możesz uzyskać dobry interaktywny wynik, przyspieszyć tworzenie i uprościć kod.

Programowanie wizualne i ręczne

Mysz na komputerze i palce na smartfonie - absolutnie różne podejścia do implementacji interfejsu użytkownika (gość, programista). Jest to całkowicie naturalny i nowoczesny wymóg zgodności z różnymi przeglądarkami.

Wszystko to razem komplikuje tworzenie stron, ale stosując ideę przeciągania i upuszczania w jej standardowej formie, wykorzystując jej zdarzenia, łącząc ten pomysł ze zwykłymi zdarzeniami na elementach, można zaimplementować mechanizm, w którym tworzenie strony będzie wystąpić wizualnie.

Przyjrzyjmy się teraz selekcji elementu lub elementów. Fakt wyboru - wygląd menu kontekstowego, np. celem jest wyrównanie wybranego (do lewej, prawej, do środka) lub rozmieszczenie elementów w pionie lub poziomie w tym samym kroku lub zmiana ich rozmiaru (minimum, maksimum).

Automatyczne przeliczanie współrzędnych i wymiarów jest lepsze niż ręczne. Mniej błędów - cel jest osiągany szybciej. Dodatkowo możesz zrobić stronę w jednej przeglądarce, zapisać położenie i rozmiar elementów. Otwierając tę ​​stronę na smartfonie, możesz poprawić współrzędne i wymiary oraz zapamiętać je dla konkretnego modelu smartfona lub wersji przeglądarki.

Tak więc ta sama strona bez ręcznej zgodności z wymogiem zgodności z różnymi przeglądarkami będzie zawierała inne dane do wyświetlenia różne urządzenia i w różnych przeglądarkach.

Jeśli pozwolisz odwiedzającemu na samodzielne wykonanie tych procedur, a także wybierze niezbędne elementy strony spośród tych dostarczonych przez dewelopera, możliwe jest zapewnienie kompatybilności z różnymi przeglądarkami i wymaganej funkcjonalności strony, biorąc pod uwagę opinia użytkownika.

Przeciągnij i upuść HTML Interfejsy umożliwiają aplikacjom korzystanie z funkcji przeciągania i upuszczania w przeglądarkach. Użytkownik może wybrać przeciągany elementy za pomocą myszy, przeciągnij te elementy do upuszczalny elementu i upuść je, zwalniając przycisk myszy. Półprzezroczysta reprezentacja przeciągany elementy podążają za wskaźnikiem podczas operacji przeciągania.

W przypadku witryn internetowych, rozszerzeń i aplikacji XUL możesz dostosować, które elementy mogą stać się przeciągany, rodzaj informacji zwrotnej przeciągany elementy produkują, a upuszczalny elementy.

Ten przegląd funkcji przeciągania i upuszczania HTML zawiera opis interfejsów, podstawowe kroki w celu dodania obsługi przeciągania i upuszczania do aplikacji oraz podsumowanie współdziałania interfejsów.

Przeciągnij wydarzenia

Notatka: Ani dragstart, ani dragend nie są uruchamiane podczas przeciągania pliku do przeglądarki z systemu operacyjnego.

Interfejsy

Podstawy

Ta sekcja zawiera podsumowanie podstawowych kroków, jakie należy wykonać, aby dodać do aplikacji funkcję „przeciągnij i upuść”.

zidentyfikuj, co jest przeciągany

Tworzenie elementu przeciągany wymaga dodania atrybutu draggable i globalnej procedury obsługi zdarzeń ondragstart, jak pokazano w poniższym przykładzie kodu:

Ten element można przeciągać.

Aby uzyskać więcej informacji, zobacz:

radzić sobie z kroplą efekt

Program obsługi zdarzenia drop może przetwarzać dane przeciągania w sposób specyficzny dla aplikacji.

Zazwyczaj aplikacja używa metody getData() do pobierania elementów do przeciągania, a następnie odpowiedniego ich przetwarzania. Dodatkowo semantyka aplikacji może się różnić w zależności od wartości

Gdzie elementy GUI są realizowane za pomocą pseudografiki) za pomocą myszy lub ekranu dotykowego.

Metoda jest realizowana przez „przechwytywanie” (przez naciśnięcie i przytrzymanie głównego ( pierwszy, częściej lewy) przycisk myszy) obiektu wyświetlanego na ekranie komputera, programowo dostępnego dla takiej operacji, i przesuwając go w inne miejsce (aby zmienić lokalizację) lub „rzucając” go na inny element (aby wywołać odpowiedni działania przewidziane przez program). W odniesieniu do okien (również dających się przesuwać w podobny sposób) termin ten zazwyczaj nie jest używany.

Podstawowe czynności i najbardziej proste przykłady działania typu „przeciągnij i upuść” to: przesuwanie obiektu, przesuwanie obiektu z panelu na panel, choć w nowoczesnych system operacyjny ah przeciąganie i upuszczanie stało się szeroko stosowane i jest jednym z głównych sposobów interakcji z komputerem w graficznym interfejsie użytkownika.

Obiektami do przenoszenia mogą być następujące elementy interfejsu: ikony pulpitu (ikony), ruchome paski narzędzi, skróty do programów na pasku zadań (od Win XP), elementy TreeView, ciąg tekstowy, komórka DataGridView., a także elementy OLE. Obiekty mogą poruszać się zarówno w określonym obszarze, w jednym oknie, między panelami jednego okna, jak i między różnymi oknami.

Zdarzenie przeciągania musi zostać wywołane przez jakąś akcję użytkownika. Najczęściej ta akcja to naciśnięcie lewego przycisku myszy na elemencie (zdarzenie to nazywa się MouseDown), który można przenieść w jego kontenerze. Niektóre komponenty mają własne zdarzenia startowe typu „przeciągnij i upuść” — na przykład TreeView ma zdarzenie ItemDrag.

Fundacja Wikimedia. 2010 .

Zobacz, co „przeciągnij i upuść” znajduje się w innych słownikach:

przeciągnij i upuść- 〈[ dræg ənd drɔ̣p] rz.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [pol. przeciągnij „ziehen” + i „und” + upuść „upadły… … Universal-Lexikon

Forma wykonywania jakichkolwiek czynności w graficznych interfejsach użytkownika, która implikuje użycie mysz komputerowa. Przetłumaczone z angielskiego oznacza dosłownie: przeciągnij i upuść. Akcja wykonywana jest poprzez operowanie na widocznym na ekranie... ... Słowniczek pojęć biznesowych

przeciągnij i upuść- (computing) Aby przenieść ikonę, plik itp. po ekranie za pomocą myszy i zwolnić w innym miejscu (przymiotnik „przeciągnij i upuść”) Główny wpis: przeciągnij … Przydatny słownik języka angielskiego

przeciągnij i upuść- IT, aby przenieść coś z jednego obszaru ekranu komputera do drugiego za pomocą myszy: »Oprogramowanie umożliwia przeciąganie i upuszczanie elementów obrazów strony, tekstu itp. gdziekolwiek chcesz. Wpis główny: drag … Warunki finansowe i biznesowe

przeciągnij i upuść- czasownik brytyjski US n.; Gen.: ; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)