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

wydarzenie	W obsłudze zdarzeń	Pożary, gdy…
ciągnąć	ondrag	…a przeciągnięty przedmiot(element lub zaznaczenie tekstu) jest przeciągany.
dragend	ondragend	…operacja przeciągania kończy się (np. zwolnienie przycisku myszy lub naciśnięcie klawisza Esc; zobacz Kończenie przeciągania .)
dragenter	ondragenter	…przeciągnięty element wchodzi w prawidłowy cel upuszczania. (Zobacz Określanie celów upuszczania .)
dragexit	ondragexit	…element nie jest już bezpośrednim celem wyboru operacji przeciągania.
dragleave	ondragleave	…przeciągnięty przedmiot pozostawia prawidłowy cel upuszczania.
dragover	ondragover	…przeciągany przedmiot jest przeciągany nad prawidłowym celem upuszczania co kilkaset milisekund.
dragstart	ondragstart	…użytkownik zaczyna przeciągać element. (Zobacz Rozpoczynanie operacji przeciągania .)
upuszczać	upuszczać	…przedmiot zostaje upuszczony na prawidłowy cel upuszczenia. (Zobacz Wykonywanie upuszczenia.)

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ągania i upuszczania.

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:

obsłużyć 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

Funkcja przeciągnij i upuść może pomóc zwiększyć wydajność iPada. Oto jak możesz z niego korzystać.

Możesz więc przenieść plik z jednej usługi przechowywania w chmurze do innej, skopiować tekst z Safari do aplikacji do edycji tekstu, aby dodać cytat, lub wykonać kopię zapasową niektórych zdjęć w aplikacji do przechowywania plików.

Jak przeciągać i upuszczać zdjęcia, pliki i tekst

1. Kliknij i przytrzymaj zdjęcie, plik lub wyróżniony tekst, który chcesz przeciągnąć do innej aplikacji.

2. Przeciągnij element do żądanej lokalizacji w tej aplikacji lub innej otwartej w widoku Slide Over lub Split View i zwolnij.

Jak przeciągać i upuszczać wiele zdjęć lub plików jednocześnie

1. Kliknij i przytrzymaj jedno ze zdjęć lub plików, które chcesz przeciągnąć.

2. Podczas przeciągania bieżącego elementu stuknij inne zdjęcie lub plik, który również chcesz przeciągnąć. Zrób to ponownie z tyloma elementami, ile chcesz przenieść.

3. Przeciągnij wszystkie zaznaczone obiekty w wyznaczone miejsce w innej aplikacji otwartej w widoku Slide Over lub Split View i zwolnij je.

Jak przeciągać tekst z jednej aplikacji do drugiej

1. Dotknij i przytrzymaj część tekstu, którą chcesz przeciągnąć, aby ją zaznaczyć.

2. Użyj punktów wyboru, aby podświetlić resztę tekstu, który chcesz przeciągnąć.

3. Naciśnij i przytrzymaj wybrany tekst.

4. Przeciągnij tekst do aplikacji, w której chcesz go umieścić, i zwolnij.

Jak zmienić położenie ikon kilku aplikacji jednocześnie za pomocą „przeciągnij i upuść”

Podczas gdy większość funkcji przeciągania i upuszczania iOS działa tylko na iPadzie, ta sztuczka działa zarówno na iPhonie, jak i iPadzie. Pozwala to na uporządkowanie lokalizacji aplikacji na ekranie głównym za pomocą « Przeciągnij i upuść” zamiast przesuwać je jeden po drugim.

1. Dotknij i przytrzymaj ikonę aplikacji, którą chcesz zmienić na ekranie głównym.

2. Stuknij dodatkowe aplikacje, które również chcesz przenieść.

3. Przeciągnij te aplikacje na stronę lub folder, w którym mają się znajdować, i upuść je.

182

W tym przykładzie wybieramy element div i sprawiamy, że można go przenieść, wywołując go metoda przeciągania(). Jak pokazano na poniższym rysunku, w otwartym dokumencie element zajmuje swoją zwykłą pozycję, ale potem można go przesunąć kursorem myszy w dowolne miejsce w oknie przeglądarki:

Funkcja przeciągania i upuszczania jest przydatna sama w sobie, ale jest jeszcze bardziej przydatna w połączeniu z interakcją Możliwość upuszczania, opisaną poniżej.

Interakcja z możliwością przeciągania jest implementowana wyłącznie przy użyciu określonych znaczników HTML i stylów CSS. Oznacza to, że ta funkcjonalność będzie działać w prawie każdej przeglądarce, ale wyposażone w nią elementy nie będą mogły współpracować z podobnymi natywnymi funkcjami przeciągania i upuszczania systemów operacyjnych.

Operacje typu „przeciągnij i upuść” zdefiniowane w specyfikacji HTML5 są zwykle implementowane przy użyciu natywnych mechanizmów systemu operacyjnego. Jeśli używasz mechanizmu przeciągania i upuszczania interfejsu jQuery UI, najlepiej wyłączyć odpowiedniki HTML5, aby uniknąć konfliktów. Aby to zrobić, ustaw atrybut draggable elementu body dokumentu na wartość false.

Dostosowywanie interakcji z przeciąganiem

Istnieje wiele opcji dostosowywania interakcji z funkcją przeciągania. Najważniejsze właściwości omówione w poniższych sekcjach podsumowano w poniższej tabeli:

Właściwości interakcji z możliwością przeciągania

Nieruchomość	Opis
oś	Ogranicza ruch w określonych kierunkach. Domyślna wartość to false, co oznacza brak ograniczeń, ale możesz również określić wartość „x” (przesuń tylko wzdłuż osi x) lub „y” (przesuń tylko wzdłuż osi y)
powstrzymywanie	Ogranicza lokalizację elementu pływającego do określonego obszaru ekranu. Obsługiwane typy wartości zostały opisane w poniższej tabeli wraz z odpowiednim przykładem. Domyślna wartość to false, oznacza to brak ograniczeń
opóźnienie	Określa czas, przez jaki element musi być przeciągany, zanim się przesunie. Domyślna wartość to 0, co oznacza brak opóźnienia
dystans	Określa odległość, na jaką użytkownik musi przeciągnąć element z jego pozycji początkowej, zanim faktycznie się przesunie. Domyślna wartość to 1 piksel
krata	Wymusza wiązanie przesuwanego elementu z komórkami siatki. Domyślna wartość to false, co oznacza brak wiązania

Ograniczenie kierunków ruchu

Istnieje kilka sposobów na ograniczenie ruchu elementu w określonych kierunkach. Pierwszym z nich jest skorzystanie z opcji axis, która pozwala ograniczyć kierunek ruchu do osi X lub Y. Przykład pokazano poniżej:

...

Uruchom przykład

W tym przykładzie definiujemy dwa elementy div, wybieramy je za pomocą jQuery i wywołujemy metodę draggable(). Do tej metody przekazywany jest obiekt, który początkowo ogranicza ruch obu divów w kierunku x. Stosując następnie metodę jQuery filter(), możemy wybrać element dragV bez ponownego przeszukiwania całego dokumentu przez jQuery i ustawić go na inny dozwolony ruch kierunek - wzdłuż osi Y. W ten sposób otrzymujemy dokument, w którym jeden element div można przeciągać tylko w kierunku pionowym, a drugi - tylko w kierunku poziomym. Wynik pokazano na rysunku:

Ograniczenie dozwolonego obszaru do przesuwania elementu

Możesz także ograniczyć obszar ekranu, na którym możesz przeciągnąć element. W tym celu używana jest opcja powstrzymywania. Formaty wartości, które można określić w tej opcji, opisano w poniższej tabeli:

Przykład użycia opcji przechowawczej pokazano poniżej:

...

Uruchom przykład

W tym przykładzie oba elementy są ograniczone do przesuwania, dzięki czemu można je przeciągać tylko w obrębie elementu nadrzędnego, który jest elementem div o stałym rozmiarze. Jeden z pływających elementów div ma dodatkowe ograniczenie z opcją osi, że może poruszać się tylko poziomo wewnątrz swojego rodzica. Wynik ilustruje rysunek:

Ograniczenie możliwości przenoszenia elementu do komórek siatki

Opcja siatki pozwala ustawić powiązanie przesuwanego elementu z komórkami siatki. Ta opcja akceptuje tablicę dwóch elementów, która określa szerokość i wysokość komórek siatki w pikselach. Przykład wykorzystania opcji siatki pokazano poniżej:

...

Uruchom przykład

W tym przykładzie siatka jest ustawiona na 100 pikseli szerokości i 50 pikseli wysokości. Kiedy przeciągasz element, „przeskakuje” z jednej (niewidocznej) komórki do drugiej. Efekt przyciągania to świetny przypadek użycia funkcji interakcji, ale trudno go przekazać za pomocą zrzutów ekranu.

Możesz utworzyć efekt przyciągania tylko dla jednego kierunku, ustawiając oś swobodnego ruchu na 1. Na przykład, jeśli ustawisz opcję siatki na , element będzie przyciągany do komórek siatki o szerokości 100 pikseli podczas poruszania się w poziomie, ale będzie poruszał się swobodnie w pionie .

Opóźnienie podróży

Istnieją dwie opcje, które pozwalają opóźnić przeciąganie elementu pływającego. Dzięki opcji opóźnienia możesz ustawić czas w milisekundach, przez który użytkownik musi przeciągnąć wskaźnik myszy, zanim element zostanie faktycznie przesunięty. Inny rodzaj opóźnienia zapewnia opcja distance, która określa odległość w pikselach, o jaką użytkownik musi przeciągnąć wskaźnik myszy, zanim element podąży za nim.

Poniżej przedstawiono przykład użycia obu ustawień:

...

Uruchom przykład

W tym przykładzie mamy do czynienia z dwoma elementami zmiennoprzecinkowymi, z których jeden ma opóźnienie ustawione w opcji delay, a drugi w opcji distance.

W przypadku opóźnienia określonego przez opcję delay użytkownik musi przeciągnąć przez określony czas, zanim faktycznie przesunie element. W tym przykładzie czas trwania tej przerwy wynosi 1000 ms. W tym czasie nie jest konieczne poruszanie myszą, ale przycisk myszki musi pozostać wciśnięty przez cały czas opóźnienia, po którym można przesuwać element przesuwając mysz. Po upływie czasu opóźnienia przesuwany element zostanie przyciągnięty do pozycji wskaźnika myszy, z zastrzeżeniem ograniczeń nałożonych przez omówione wcześniej opcje siatki, regionu i osi.

Podobny efekt ma opcja odległość, ale w tym przypadku użytkownik musi przeciągnąć wskaźnik myszy o co najmniej określoną liczbę pikseli w dowolnym kierunku od początkowego położenia elementu. Przenoszony element przeskoczy do aktualnej lokalizacji wskaźnika.

Jeśli zastosujesz oba ustawienia do tego samego elementu, przesuwany element nie poruszy się, dopóki oba kryteria opóźnienia nie zostaną spełnione, tj. do czasu, gdy próba przeciągnięcia elementu trwa przez określony czas i do momentu przesunięcia wskaźnika myszy o określoną liczbę pikseli.

Korzystanie z przeciąganych metod interakcji

Wszystkie metody zdefiniowane dla interakcji Przeciąganie są częścią zestawu podstawowych metod, które już widziałeś w widżetach. Metody specyficzne dla interakcji Przeciąganie nie są dostępne, więc nie będziemy ich szczegółowo omawiać. Listę dostępnych metod przedstawia poniższa tabela:

Korzystanie z przeciąganych zdarzeń interakcji

Interakcja z możliwością przeciągania obsługuje prosty zestaw zdarzeń, które powiadamiają o przeciąganiu elementu. Zdarzenia te zostały opisane w poniższej tabeli:

Podobnie jak w przypadku zdarzeń widżetów, na te zdarzenia również można reagować. Poniżej przedstawiono przykład obsługi zdarzeń start i stop:

...

Uruchom przykład

Ten przykład używa zdarzeń start i stop do zmiany zawartości tekstowej elementu podczas procesu przeciągania. Ta zaleta wynika z faktu, że interakcja Draggable jest w całości zaimplementowana przy użyciu HTML i CSS: możesz użyć jQuery do zmiany stanu elementu pływającego, nawet gdy porusza się on po ekranie.

Korzystanie z interakcji z możliwością upuszczania

W niektórych sytuacjach samo przeciągnięcie elementu może wystarczyć, ale jest najbardziej przydatne w połączeniu z interakcją z możliwością upuszczania.

Elementy, do których zastosowano interakcję Droppable (akceptowanie elementów), zyskują możliwość akceptowania elementów upuszczanych utworzonych za pomocą interakcji Draggable.

Elementy odbiorcze są tworzone za pomocą metoda droppable(), ale aby uzyskać użyteczną funkcjonalność, musisz utworzyć programy obsługi zdarzeń spośród tych zdefiniowanych dla tego rodzaju interakcji. Dostępne wydarzenia przedstawia poniższa tabela:

Upuszczalne zdarzenia interakcji

Wydarzenie	Opis
Stwórz	Występuje, gdy do elementu zostanie zastosowana interakcja z możliwością upuszczania
Aktywuj	Występuje, gdy użytkownik zaczyna przeciągać element pływający
dezaktywować	Występuje, gdy użytkownik przestaje przeciągać pływający element
koniec	Występuje, gdy użytkownik przeciąga element pływający nad elementem odbierającym (ale zakładając, że przycisk myszy nie został jeszcze zwolniony)
na zewnątrz	Występuje, gdy użytkownik przeciąga element pływający poza element odbierający
upuszczać	Występuje, gdy użytkownik zostawia pływający element na elemencie odbierającym

Przykład tworzenia prostego elementu odbierającego, który ma jeden moduł obsługi zdarzenia upuszczania, jest podany poniżej:

...

Uruchom przykład

W tym przykładzie do dokumentu dodawany jest element div, którego zawartość tekstowa jest reprezentowana przez ciąg „Zostaw tutaj”. Wybieramy ten element za pomocą jQuery i wywołujemy metodę droppable(), przekazując mu obiekt ustawień, który definiuje procedurę obsługi zdarzenia drop. Odpowiedzią na to zdarzenie jest zmiana tekstu elementu pływającego za pomocą metody text().

Interakcja typu „przeciągnij i upuść”, którą tworzymy w tym przykładzie, jest najprostsza, ale zapewnia przydatny kontekst do wyjaśnienia, jak współdziałają interakcje z możliwością przeciągania i upuszczania. Poszczególne etapy procesu przeciągania i upuszczania elementów ilustruje rysunek:

Wszystko to wygląda bardzo prosto. Przeciągamy przesuwany element, aż znajdzie się nad elementem odbiorczym i zwalniamy. Upuszczony element pozostaje tam, gdzie został, a jego treść tekstowa zmienia się w odpowiedzi na wystąpienie zdarzenia drop. W poniższych sekcjach pokazano, jak używać innych zdarzeń interakcji, które można upuścić, aby poprawić wrażenia użytkownika.

Podświetlenie docelowego obiektu odbierającego

Korzystając ze zdarzeń aktywuj i dezaktywuj, możesz podświetlić docelowy obiekt odbiorczy, gdy użytkownik rozpocznie proces przeciągania elementu. W wielu sytuacjach pomysł ten jest bardzo owocny, ponieważ daje użytkownikowi wiarygodne wskazanie, które elementy wchodzą w skład modelu „przeciągnij i upuść”. Odpowiedni przykład pokazano poniżej:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Opuszczone ") ), aktywuj: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), dezaktywuj: function() ( $("#droppable ").css("obramowanie", "").css("kolor-tła", ""); ) )); )); ... Uruchom przykład

Gdy tylko użytkownik zacznie przeciągać element, aktywuje się zdarzenie - skojarzone z naszym elementem odbierającym - a funkcja obsługi używa metody css() do zmiany właściwości CSS border i background-color. W rezultacie docelowy element odbiorczy zostaje podświetlony, co wskazuje użytkownikowi, że istnieje połączenie między nim a przesuwanym elementem.

Zdarzenie deactivate służy do usuwania wartości właściwości CSS z elementu odbierającego i resetowania go, gdy tylko użytkownik zwolni przycisk myszy. (To zdarzenie jest wyzwalane za każdym razem, gdy przeciąganie elementu zostaje zatrzymane, niezależnie od tego, czy przeciągany element pozostaje na elemencie odbierającym, czy nie). Proces ten przedstawiono na rysunku:

Obsługa nakładania się elementów

Technologię „przeciągnij i upuść” można ulepszyć, dodając do niej obsługę zdarzeń. Zdarzenie over występuje, gdy 50% przesuwanego elementu znajduje się nad jakąkolwiek częścią elementu odbierającego. Zdarzenie out uruchamia się, gdy wcześniej nakładające się elementy już się nie nakładają. Przykładową odpowiedź na te zdarzenia pokazano poniżej:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("dropped") ) , aktywuj: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), dezaktywuj: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Uruchom przykład

Używane są tu te same funkcje obsługi, co w poprzednim przykładzie, ale w tym przypadku są one powiązane ze zdarzeniami over i out. Gdy co najmniej 50% elementu pływającego nakłada się na element odbiorczy, zostaje on obramowany i zmienia się kolor jego tła, jak pokazano na rysunku:

Ten 50% limit nazywany jest progiem tolerancji, który można ustawić podczas tworzenia elementu odbiorczego, jak zostanie to pokazane dalej.

Upuszczalna konfiguracja interakcji

Interakcja Droppable ma wiele właściwości, które można modyfikować, aby dostosować jej zachowanie. Te właściwości są wymienione w poniższej tabeli:

Upuszczalne właściwości interakcji

Nieruchomość	Opis
wyłączone	Jeśli ta opcja ma wartość true, funkcja interakcji z możliwością upuszczania jest początkowo wyłączona. Wartość domyślna to fałsz
zaakceptować	Zawęża zestaw elementów pływających, na które zareaguje element odbierający. Domyślna wartość to *, pasuje do dowolnego elementu
activeClass	Definiuje klasę, która zostanie przypisana w odpowiedzi na zdarzenie Activate i usunięta w odpowiedzi na zdarzenie deactivate
hoverClass	Definiuje klasę, która zostanie przypisana w odpowiedzi na zdarzenie over i usunięta w odpowiedzi na zdarzenie out.
tolerancja	Określa minimalny stopień zachodzenia na siebie, przy którym występuje nadmierne zdarzenie

Ograniczenie dozwolonych elementów pływających

Możesz ograniczyć zestaw elementów z możliwością upuszczania, które będą akceptowane przez element, który ma funkcję współdziałania z możliwością upuszczania, korzystając z opcji accept. Wartość opcji accept powinna być selektorem. W wyniku tego zdarzenia interakcje, które można upuścić, wystąpią tylko wtedy, gdy przenoszony element pasuje do określonego selektora. Odpowiedni przykład pokazano poniżej:

...

Uruchom przykład

W tym przykładzie są dwa elementy pływające o identyfikatorach drag1 i drag2. Przy tworzeniu elementu akceptującego używana jest opcja accept, za pomocą której wskazujemy, że tylko element drag1 będzie akceptowanym elementem pływającym.

Podczas przeciągania elementu drag1 zobaczysz ten sam efekt, co w poprzednich przykładach. Zdarzenia aktywacja, dezaktywacja, przełączenie i zakończenie będą uruchamiane na elemencie odbierającym w odpowiednich momentach. Jednocześnie, jeśli przeciągniesz element drag2, który nie pasuje do selektora określonego w parametrze accept, zdarzenia te nie zostaną wywołane. Ten element można dowolnie przesuwać, ale nie zostanie on zaakceptowany przez element odbiorczy.

Zwróć uwagę na zmianę w sposobie wybierania dopuszczalnego elementu pływającego, na którym należy wywołać metodę text(). Gdy w dokumencie był tylko jeden element pływający, wystarczył do tego atrybut id:

Upuść: function() ( $("#przeciągnij").text("Upuszczono") ),

W tym przykładzie są dwa elementy pływające, a wybranie przez atrybut id nie da pożądanego rezultatu, ponieważ tekst w tym przypadku zawsze będzie się zmieniał w tym samym elemencie pływającym, niezależnie od tego, który jest akceptowalny dla elementu odbierającego.

Rozwiązaniem jest użycie obiektu interfejsu użytkownika, który jQuery UI udostępnia jako dodatkowego argumentu dla każdej procedury obsługi zdarzeń. Przeciągana właściwość obiektu interfejsu użytkownika zwraca obiekt jQuery zawierający element, który użytkownik przeciąga lub próbuje upuścić na elemencie docelowym, umożliwiając wybranie żądanego elementu w następujący sposób:

Upuść: function(event, ui) ( ui.draggable.text("Porzucone") ),

Zmiana progu nakładania się

Domyślnie zdarzenie over jest uruchamiane tylko wtedy, gdy co najmniej 50% przesuwanego elementu nachodzi na element odbierający. Wielkość nakładania się tego progu można zmienić za pomocą opcji tolerancji, która może przyjąć wartości przedstawione w poniższej tabeli:

Dwie wartości, których najczęściej używam, dopasowanie i dotyk, to te, które mają największy sens dla użytkowników. Używam wartości dopasowania, gdy przeciągany element powinien pozostać w obszarze elementu odbiorczego, w którym został przeniesiony, a wartości dotyku, gdy przeciągany element powinien powrócić do swojej pierwotnej pozycji (przykład zostanie podany później). Poniżej przedstawiono przykład wykorzystania parametrów dopasowania i dotyku:

Wartość clone nakazuje interfejsowi jQuery utworzenie kopii elementu pływającego wraz z całą jego zawartością i użycie wyniku jako elementu pomocniczego. Wynik pokazano na rysunku:

Element pomocniczy jest usuwany, gdy użytkownik zwolni przycisk myszy nad przesuwanym elementem, pozostawiając przesuwany element i element odbiorczy w ich pierwotnych położeniach.

Jak pokazano na rysunku, oryginalny element pływający pozostaje na swoim miejscu, a tylko element pomocniczy porusza się po ekranie podążając za wskaźnikiem myszy. Jeśli rozmiar przenoszonego elementu jest duży, jak w naszym przykładzie, to obejmuje on pozostałe elementy dokumentu, więc użytkownikowi będzie trudno nawet śledzić położenie elementu odbierającego. Problem ten można rozwiązać, podając funkcję jako wartość opcji pomocnika, jak pokazano w poniższym przykładzie:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Uruchom przykład

Gdy użytkownik rozpoczyna przeciąganie elementu, interfejs jQuery wywołuje funkcję określoną przez parametr pomocnika i używa zwróconego elementu jako obiektu przeciągania. W tym przypadku do tworzenia elementu img używam jQuery. Wynik pokazano na rysunku:

Mały obrazek pełni rolę symbolu zastępczego elementu pływającego, co znacznie ułatwia śledzenie innych elementów w dokumencie.

Obiekt interfejsu użytkownika, który interfejs użytkownika jQuery przekazuje do zdarzeń interakcji Droppable, zawiera właściwość pomocnika, która może służyć do manipulowania elementem pomocniczym podczas jego przeciągania. Przykład użycia tej właściwości w połączeniu ze zdarzeniami over i out pokazano poniżej:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("granica", "") ) )); )); ...

W tym przypadku zdarzenia over i out oraz właściwość ui.helper są używane do wyświetlania obramowania wokół elementu pomocniczego, gdy nakłada się on na element hosta. Wynik pokazano na rysunku:

Przyciągaj do krawędzi elementów

Używając opcje przyciągania można osiągnąć, że przesuwany element jest „przyciągany” do krawędzi elementów, obok których przechodzi. Ta opcja przyjmuje selektor jako swoją wartość. Element pływający zostanie przyciągnięty do krawędzi dowolnego elementu, który pasuje do określonego selektora. Przykład użycia opcji przyciągania pokazano poniżej:

Uruchom przykład

Kiedy ruchomy element zbliża się do jednego z dopasowanych elementów, jest do niego jakby „przyciągany” w taki sposób, że ich sąsiednie krawędzie stykają się. W przypadku takiego wiązania możesz wybrać dowolny element, nie tylko ten odbiorczy. W tym przykładzie dodałem element div i ustawiłem opcję snap na wartość, która wybiera dany element w dokumencie, a także element odbierający.

Istnieje kilka podopcji, które pozwalają dostosować zachowanie elementów w odniesieniu do zakotwiczenia. Jeden z nich jest opcja SnapMode. Może służyć do określenia rodzaju oprawy. Dozwolone są następujące wartości: wewnętrzny(przycisk do wewnętrznych krawędzi elementów), zewnętrzny(przyciągnij do zewnętrznych krawędzi elementów) i Zarówno(przyciągaj do wszystkich krawędzi; domyślnie).

opcja snapTolerance pozwala określić, jak daleko element pływający musi zbliżyć się do krawędzi elementu docelowego, zanim nastąpi przyciąganie. Domyślna wartość to 20, co oznacza 20 pikseli. W przykładzie użyto wartości 50, co odpowiada zakotwiczeniu w większej odległości. Bardzo ważne jest, aby wybrać odpowiednią wartość dla tej opcji. Jeśli wartość opcji snapTolerance jest zbyt niska, to użytkownik może nie zauważyć efektu przyciągania, a jeśli jest zbyt wysoka, przesuwany element zacznie niespodziewanie przeskakiwać, dociągając się do odległych elementów.

Wykorzystanie technologii przeciągnij i upuść (przeciągnij i upuść) pozwala użytkownikowi przenosić różne obiekty z jednego na drugi, na przykład elementy jednej listy do drugiej. Aby to zrobić, musisz użyć dwóch kontrolek: ujścia i źródła. Odbiorcą jest obiekt, który otrzyma obiekt źródłowy (obiekt ruchomy).

Zdarzenia, które występują podczas ruchu obiektów, są wymienione poniżej w kolejności, w jakiej występują.

OnStartDrag(typ TStartDragEvent) - generowane przez obiekt źródłowy na początku operacji. Parametry przekazywane do obsługi zdarzeń: obiekt odbiornika DragObject (typ TDragObject), obiekt źródłowy (typ TObject).

OnDragOver(typ TDragOverEvent) - tworzy obiekt docelowy, gdy znajduje się nad nim obiekt pływający. Parametry przekazywane do obsługi zdarzeń: obiekt Sender receiver (typ TObject), obiekt źródłowy Source (typ TObject), stan ruchu State (typ TDragState), X i Y (typ integer) - aktualne współrzędne wskaźnika myszy, Accept (typ boolean ) znak potwierdzenia operacji przeniesienia. Stan ruchu pozwala stwierdzić, czy przesuwany obiekt znajduje się w obszarze odbiornika, czy porusza się w nim, czy go zostawił. Przekazane parametry umożliwiają obiektowi odbierającemu zaakceptowanie lub odrzucenie obiektu źródłowego. Parametr Accept jest ustawiony na Trye, jeśli operacja przenoszenia zostanie zaakceptowana, w przeciwnym razie False.

onDragDrop (typ TDragDropEvent) — podnoszony przez obiekt docelowy, gdy przeciągany obiekt jest na niego upuszczany. Programowi obsługi zdarzeń są przekazywane bieżące współrzędne wskaźnika myszy, obiektu odbiorcy Sender (typu TObject) i oryginalnego obiektu ruchu źródła (typu TObject).

onEndDrag (typ EndDragEvent) — wywoływany po zakończeniu operacji przeciągania. Współrzędne X i Y punktu, w którym obiekt źródłowy Sender i obiekt odbiornika docelowego są przekazywane do programu obsługi zdarzeń.

Aby utworzyć metodę przeciągnij i upuść, wystarczy zaimplementować dwa zdarzenia: OnDragDrop i OnDragOver z właściwością DragMode ustawioną na dmAutomatic. W przeciwnym razie początek operacji przenoszenia, metoda BeginDrag, musi być zakodowana przez programistę.

Aby skonsolidować materiał, stworzymy następującą aplikację. Umieść składnik Panel w formularzu. Ustaw właściwość DragMode inspektora obiektów na dmAutomatic. Wybierz obiekt formularza i użyj Inspektora obiektów, aby utworzyć następujące zdarzenia:

Procedura TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean); rozpocznij jeśli Źródło = Panel1 then Accept:= True else Accept:= False; koniec; procedura TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); początekPanel1.Left:=X; Panel1.Góra:=Y; koniec;

Teraz, uruchamiając aplikację i wciskając przycisk myszy nad panelem, możemy przesuwać obiekt panelu po całym formularzu.

Wniosek: zapoznaliśmy się z technologią przeciągnij i upuść(przeciągnij i upuść) i wykorzystał to w praktyce.