Przeciągnij i upuść: jak obsługiwać elementy interfejsu użytkownika

Najłatwiej jest wziąć i umieścić coś, niż napisać, co trzeba wziąć i gdzie je umieścić. Oczywiście bez myszy lub urządzenia podobnego do niej nic nie wybierzesz, a niczego nie określisz, ale nawet w obecnym stanie rzeczy, użycie "przeciągnij i upuść" jest bardzo naturalne i wygodne.

Zakres pomysłu to nie tylko sklepy internetowe, biblioteki elektroniczne, systemy wyszukiwania czy informacyjne, ale także sfera aplikacji. Pomysł ten ma bardzo duże zastosowanie w tworzeniu stron i ich elementów, tworzonych i utrzymywanych interaktywnie, bez udziału programisty.

Opis pomysłu

Wybierz, przenieś i włóż - pomysł jest naturalny i wygodny. To niesamowite, że nie urodziła się, gdy mysz stała się nieodzownym komputerem dodatkowym.

Najbardziej oczywistym przykładem jest wybór produktu w sklepie internetowym. Wybierz żądany produkt za pomocą myszy i przeciągnij go do koszyka - po prostu, naturalnie i wygodnie. Pobieranie plików: zabranie dokumentu poza okno przeglądarki i umieszczenie go na elemencie strony, inicjując w ten sposób przekazanie dokumentu na serwer, to także praktyczny pomysł.

Dla twórcy idea przeciągania i upuszczania polega na manipulowaniu elementami strony bez ręcznego ponownego obliczania współrzędnych i rozmiarów znaczników, możliwości wyboru wielu elementów i ich wyrównania, a także przenoszenia boków znaczników bloków.

HTML i CSS to doskonałe języki do opisywania tagów i ich stylów, ale gdy programista ma możliwość interaktywnego manipulowania elementami strony bez ręcznego ponownego obliczania współrzędnych i rozmiarów, czyni to pracę wygodniejszą i wydajniejszą.

Prosty transfer plików

"Przeciągnij i upuść": tłumaczenie z angielskiego na rosyjski dosłownie brzmi "przeciągnij i upuść". W praktyce brzmi to i działa lepiej: wybrał, przekazał i wypuścił - po prostu i naturalnie.

Implementacja na stronie transferu plików na stronę, na serwer lub do innych zastosowań jest bardzo prosta.

W tym przykładzie mysz wybrała kilka plików na pulpicie (lewy obraz). Po wybraniu wciśnięto lewy przycisk myszy i wybrane "poszło" do kosza. Sama przeglądarka pokazała, jak to się dzieje, napisała podpowiedź "kopiowanie" i dookoła stworzyła kontury przeniesionych plików.

Kiedy mysz pojawiła się nad koszem, użytkownik zwolnił lewy przycisk myszy, nastąpiło zdarzenie "przeciągnij i upuść", a na stronie internetowej (obraz dolny) kod JavaScript był w stanie odebrać i przetworzyć wszystkie pliki, które odwiedzający podał na stronie (stronie internetowej).

Opis implementacji

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

W tym przypadku interfejs użytkownika jest reprezentowany przez dwa znaczniki: scPlaceFile (jest to sam koszyk, w którym należy umieścić pliki) i scPlaceFiles (jest to wynik przetwarzania plików, w tym przypadku ich listy).

Logika strony jest następująca. Po załadowaniu strony do przeglądarki, funkcja obsługi zdarzenia "ondrop" jest przypisana do koszyka - inne zdarzenia są blokowane i nie są używane.

Strona działa w trybie zwykłym, ale gdy tylko użytkownik wybierze plik i przeciągnie go do obrazu koszyka, czyli do znacznika scPlaceFile, rozpocznie się wydarzenie "pobrane pliki".

Ten przewodnik po prostu wyświetla listę plików. Ich liczba znajduje się w pliku event.dataTransfer.files.length, a informacje o każdym pliku w pliku event.dataTransfer.files [i] .name. Deweloper określa, co zrobić z otrzymanymi danymi, w tym przypadku po prostu tworzy się lista otrzymanych plików.

Po przetworzeniu zdarzenie jest blokowane i nie jest dystrybuowane. Jest to konieczne, aby przeglądarka nie angażowała się w działalność amatorską i nie zakłócała ​​przetwarzania otrzymanych informacji.

DnD i dane zewnętrzne

Przesyłanie obrazów na serwer podczas przeciągania i upuszczania jest powszechną praktyką korzystania z tej technologii. Z reguły programista tworzy formularz do przesłania pliku (1), który działa w zwykły sposób (2). Użytkownik zazwyczaj może wybrać pliki i przesłać je.

Jeśli jednak odwiedzający zrobi "przeciągnij i upuść" w określonym miejscu formularza, pole nazwy pliku (pliku) zostanie wypełnione automatycznie.

To dobra decyzja. Zakładając, że nie ma myszy na komputerze, jest oczywiście bardzo trudne. Ale lepiej jest stworzyć interfejs użytkownika w zwykłej wersji i implementacji DnD.

DnD i dane wewnętrzne

Dbanie o interesy odwiedzających jest zawsze ważne, ale problemy dewelopera mają również znaczenie. Można implementować przeciąganie i upuszczanie nie tylko za pomocą standardowych środków, ale także poprzez obsługę zdarzeń myszy na elementach strony.

Zadanie obliczania współrzędnych znaczników i ich rozmiarów występuje stale. Ręczne obliczenia to dobra praktyka, ale interaktywna wersja jest wygodniejsza. Wszystkie tagi mają zawsze kształt prostokątny, a śledzenie zdarzeń "myszy" po bokach elementów pozwala utworzyć możliwość automatycznego przenoszenia 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, na przykład jednej z boków elementu. Poruszanie myszą - strona porusza się we właściwym kierunku. Zwolnienie przycisku myszy - strona zatrzymuje się, a jej współrzędne się zmieniają. Możesz więc zmienić pozycję elementu lub jego rozmiar.

Formalnie nie jest to "przeciągnij i upuść", ale efekt jest podobny i praktyczny. Po utworzeniu uniwersalnych modułów obsługi dowolnego elementu strony można uzyskać dobry interaktywny wynik, przyspieszyć tworzenie i uprościć kod.

Programowanie wizualne i ręczne

Mysz na komputerze i palce na smartfonie to zupełnie inne podejścia do implementacji interfejsu użytkownika (odwiedzający, programista). Jest to całkowicie naturalny i nowoczesny wymóg kompatybilności z różnymi przeglądarkami.

Wszystko to razem sprawia, że ​​trudno jest tworzyć strony, ale stosując ideę "przeciągnij i upuść" w swojej standardowej formie, wykorzystując jej zdarzenia, łącząc ten pomysł ze zwykłymi zdarzeniami na elementach, można zaimplementować mechanizm, za pomocą którego tworzenie strony będzie wyglądało wizualnie.

Rozważmy teraz wybór elementu lub elementów. Fakt wyboru to pojawienie się menu kontekstowego, na przykład celem jest wyrównanie wybranego (lewego, prawego, środkowego) lub rozmieszczenie elementów w pionie lub poziomie z tym samym krokiem lub zmiana ich rozmiaru (minimum, maksimum).

Automatyczne przeliczanie współrzędnych i rozmiarów jest lepsze niż ręczne. Mniej błędów - szybszy cel. Ponadto możesz utworzyć stronę w jednej przeglądarce, zapisać pozycję i rozmiar elementów. Otwierając tę ​​stronę na smartfonie, możesz poprawić wartości współrzędnych i rozmiarów i zapamiętać je dla konkretnego modelu smartfona lub wersji przeglądarki.

Tak więc ta sama strona bez ręcznej zgodności z wymaganiami kompatybilności z różnymi przeglądarkami będzie miała różne dane do wyświetlania na różnych urządzeniach iw różnych przeglądarkach.

Jeśli zezwalasz odwiedzającemu na samodzielne wykonywanie tych procedur, a także wybieranie pożądanych elementów strony spośród elementów dostarczonych przez programistę, możesz zapewnić kompatybilność między przeglądarkami i wymaganą funkcjonalność strony, biorąc pod uwagę widoki użytkownika.