Borland wdrożył własną wersję interfejsu Drag & Drop dla biblioteki VCL (przetłumaczoną jako „przeciągnij i upuść”). Ten wewnętrzny interfejs - możesz wysyłać i odbierać dowolne kontrolki Delphi wewnątrz formularza (z wyjątkiem samego formularza). Zaimplementowano go bez użycia odpowiednich funkcji interfejsu API systemu Windows - należy ich używać podczas organizowania komunikacji z innymi zadaniami poprzez przeciąganie i upuszczanie.
Klikając lewym przyciskiem myszy nad kontrolką, możemy „przeciągnąć” do dowolnego innego elementu. Z punktu widzenia programisty oznacza to, że w momencie przeciągania i zwalniania klucza generowane są pewne zdarzenia, które przekazują wszystkie niezbędne informacje - wskaźnik do przeciąganego obiektu, bieżące współrzędne kursora itp. Odbiornikiem zdarzeń jest element, na którym znajduje się kursor. Obsługa takiego zdarzenia musi poinformować system, czy dana kontrolka akceptuje „pakiet”, czy nie. Po zwolnieniu przycisku nad odbierającym elementem sterującym generowane jest jedno lub dwa kolejne zdarzenia, w zależności od gotowości odbiornika.
Canceldrag Anuluje bieżącą operację przeciągania i upuszczania lub przeciągania i dokowania.
Funkcja FindDragTarget (const Pos: TPoint; AllowDisabled: Boolean): TControl;
Funkcja zwraca obiekt klasy podstawowejTControl do którego należy pozycja ekranu o współrzędnych określonych przez parametr Pos. Ta funkcja służy do określania potencjalnego odbiorcy operacji przeciągania i upuszczania lub przeciągania i dokowania. Jeśli dla podanego położenia nie istnieją kontrolki okienkowe, funkcja powracazero . Parametr AllowDisabled określa, czy wyłączone obiekty będą brane pod uwagę.
Funkcja IsDragObject (Sender: TObject): Boolean;
Funkcja określa, czy obiekt zdefiniowany w parametrze Sender jest potomkiem klasy.TDragObject . Tej funkcji można użyć jako parametru Source w procedurach obsługi zdarzeń OnDragOver i OnDockOver w celu ustalenia, czy przeciągany obiekt zostanie zaakceptowany. Działa równieżIsDragObject może być używany jako parametr Source w modułach obsługi zdarzeń OnDragDrop i OnDockDrop w celu poprawnej interpretacji przeciąganego obiektu.
Właściwości DragMode, DragCursor, metody BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, parametr Accept
Proces przeciągania i upuszczania informacji z jednego obiektu do drugiego za pomocą myszy jest szeroko stosowany w Wdowie. Możesz przenosić pliki między folderami, przenosić same foldery itp.
Wszystkie właściwości, metody i zdarzenia związane z procesem przeciągania i upuszczania są zdefiniowane w klasie TControl, która jest prekursorem wszystkich komponentów wizualnych Delphi. Dlatego są wspólne dla wszystkich komponentów.
Początek przeciągania zależy od właściwości DragMode, którą można ustawić podczas procesu projektowania lub programowo równą dmManual lub dmAutomatic. Wartość dmAutomatic (automatyczna) określa automatyczne rozpoczęcie procesu przeciągania i upuszczania, gdy użytkownik kliknie przycisk myszy nad komponentem. Jednak w tym przypadku zdarzenie OnMouseDown powiązane z kliknięciem przycisku myszy dla tego składnika w ogóle nie występuje.
Interfejs do przesyłania i odbierania komponentów pojawił się już dawno temu. Zapewnia interakcję dwóch elementów sterujących w czasie wykonywania. W takim przypadku można wykonać wszelkie niezbędne operacje. Pomimo prostoty implementacji i wieku rozwoju wielu programistów (szczególnie początkujących) uważa ten mechanizm za niejasny i egzotyczny. Jednak użycie techniki przeciągnij i upuść może być bardzo przydatne i łatwe do wdrożenia. Teraz to zobaczymy.
Aby mechanizm działał, musisz odpowiednio skonfigurować dwa elementy sterujące. Jeden powinien być źródłem (Source), drugi - odbiornikiem (Target). W tym przypadku źródło nigdzie się nie przenosi, a jedynie jest zarejestrowane jako takie w mechanizmie.
Uwierz mi, wystarczy po prostu przekonwertować współrzędne X, Y przekazane w parametrach zdarzenia OnDragOver i OnDragDrop na współrzędne formularza.
Praca z właściwościami Lewy i Górny komponentu, po którym przesuwa się kursor. Dam prosty przykład. Umieść komponent Memo w formularzu i ustaw właściwość Align na alTop. Umieść panel w formularzu, ustaw także właściwość Align na alTop i ustaw małą wartość dla właściwości Wysokość, powiedzmy 6 lub 7 pikseli. Zainstaluj DragMode na dmAutomatica i DragCursor na crVSplit. Umieść inny komponent notatki i ustaw opcję Wyrównaj do alClient. Jednocześnie wybierz oba komponenty Memo, panel i utwórz wspólną procedurę obsługi zdarzeń OnDragOver, jak pokazano poniżej:
Niedawno wpadłem na pomysł, aby rozpocząć tworzenie gry na Androida. Na początek postanowiłem pisać szachy. Myślałem o technologii Przeciągnij i upuść Idealny do wdrożenia mechanizmu przenoszenia kształtów. Dla niewtajemniczonych zauważam to metoda przeciągnij i upuść w możliwości przeciągnięcia jednego obiektu graficznego do drugiego i wykonania określonej akcji po wydaniu. Najprostszym przykładem jest usunięcie skrótu z pulpitu komputera poprzez przeciągnięcie go do kosza. Po wrzuceniu skrótu do koszyka mówimy systemowi, że chcemy zmusić te dwa obiekty do interakcji. System odbiera nasz sygnał i decyduje, jakie działania powinien podjąć. Przeciąganie i upuszczanie jest powszechne ze względu na intuicyjną przejrzystość. Takie podejście jest wspierane przez nasze doświadczenie w interakcjach z rzeczywistymi obiektami i działa świetnie w środowisku wirtualnym. Jeśli chodzi o szachy, użycie techniki przeciągnij i upuść jest technologicznie łatwiejsze do ustalenia komórki, w której użytkownik przeciągnął element, ponieważ nie ma potrzeby obliczania liczby komórek na podstawie współrzędnych punktu zwolnienia. Ta praca zostanie podjęta przez maszynę wirtualną.
Cele korzystania z technologii Drag n Drop
Korzystanie z technologii przeciągnij i upuść pozwala mi rozwiązać trzy problemy przy małej ilości krwi:
- Wizualizacja kursu. Gdy użytkownik dotknie figury i zacznie ją przesuwać po ekranie, figurka zostanie zastąpiona mniejszym obrazem. W ten sposób użytkownik rozumie, że postać została przechwycona.
- Ograniczyłem obszar ruchu figury do wielkości planszy.
- Jeśli użytkownik zwolnił figurę w niewłaściwym miejscu, powinien powrócić do pierwotnej pozycji.
Zadania są nakreślone, przystąpimy do ich realizacji.
Kliknij Zastąp ImageView
Wszystkie moje kształty są obiektami ImageView. Niestety okazało się, że implementacja Drag & Drop w Androidzie nie pozwala „z pudełka” na zastąpienie obrazu obiektu po jego dotknięciu. Niemniej jednak zadanie to zostało całkowicie rozwiązane za pomocą interfejsu API. Będziemy musieli wykonać kilka prostych kroków:
- Utwórz obiekt DragShadowBuilder.
- Wywołaj metodę startDrag.
- Ukryj nasz ImageView, który wyświetla kształt, wywołując metodę setVisibility z parametrem View.INVISIBLE. W rezultacie na ekranie pozostanie tylko obiekt DragShadowBuilder, co będzie sygnałem dla użytkownika o przechwyceniu figury.
Te kroki muszą zostać zaimplementowane w OnTouchListner ImageView. Aby to zrobić, ponownie zdefiniuj metodę onTouch:
@ Zastąp publiczny boolean onTouch (Widok, MotionEvent motionEvent) (if (motionEvent. GetAction () \u003d\u003d MotionEvent. ACTION_DOWN) (ClipData clipData \u003d ClipData. NewPlainText ("", ""); Widok. DragShadowBuilder dsb \u003d nowy widok. DragShadowBuilder (widok); widok. startDrag (clipData, dsb, widok, 0); widok. setVisibility (widok. NIEWIDOCZNY); return true;) else (return false;))Wszystko jest bardzo proste. Po wymyśleniu podstawienia obrazu przejdźmy do następnego zadania.
Przeciągnij limit upuszczenia dla funkcji przeciągania upuszczenia
Ograniczenie obszaru przeciągania wiąże się z jednym problemem. Faktem jest, że jeśli uwolnisz element poza planszę, zdarzenie upuszczenia nie nastąpi, ponieważ użytkownik zwolnił obiekt od zera, a obiekt nie ma z nią nic wspólnego. W rezultacie postać nie powróci do pierwotnego stanu i pozostanie ukryta na zawsze. Zabiłem dużo czasu na czytanie dokumentacji, ale wciąż nie mogłem znaleźć sposobu na ograniczenie obszaru przeciągania i upuszczania obiektów. Oświetlenie przyszło nagle. Nie muszę wcale ograniczać obszaru, muszę dowiedzieć się, czy użytkownik poprawnie wypuścił figurę, czy nie.
Określenie prawidłowego wydania
Odpowiedzi na moje pytania znalazłem w sekcji „Obsługa zdarzeń przeciągania” na stronie programistów Androida. Oto kilka kluczowych punktów:
- Gdy użytkownik zakończy przeciąganie i upuszczanie w module obsługi DragListeners, wywoływane jest zdarzenie ACTION_DRAG_ENDED.
- W DragListener można uzyskać bardziej szczegółowe informacje na temat operacji przeciągania, wywołując metodę DragEvent.getResult ().
- Jeśli DragListener zwróci true w odpowiedzi na zdarzenie ACTION_DROP, wywołanie getResult zwróci również true, w przeciwnym razie false.
Dlatego muszę przechwycić zdarzenie ACTION_DRAG_ENDED i wywołać metodę getResult. Jeśli zwróci fałsz, użytkownik przeciągnął element z planszy i muszę ustawić ImageView w trybie widocznym.
@ Zastąp publiczny onolan onDrag (Widok, DragEvent dragEvent) (int dragAction \u003d dragEvent. GetAction (); Widok dragView \u003d (Widok) dragEvent. GetLocalState (); if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (zawieraDragable \u003d false;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (zawieraDragable \u003d true;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent))) (dragView. setVisibility (View. VISIBLE);)) else if (dragAction \u003d \u003d DragEvent. ACTION_DROP & amp; zawieraDragable) (checkForValidMove ((ChessBoardSquareLayoutView) widok, dragView); dragView. SetVisibility (View. VISIBLE);) return true;) prywatny boolean dropEventNotHandled (DragEvent dragEvent) (pobierz! DragEvent );)Teraz użytkownik może puścić figurę w dowolnym miejscu i nic złego się nie stanie.
Określenie dopuszczalnych ruchów
Ostatnia część artykułu poświęcona jest sprawdzeniu poprawności ruchu, który użytkownik próbuje wykonać. Zanim szczegółowo omówię ten temat, zrobię małą uwagę wyjaśniającą strukturę mojej aplikacji. Szachownica jest reprezentowana jako TableLayout, a każda komórka jest potomkiem LinearLayout i ma OnDragListener.
Ponadto każdy OnDragListener odnosi się do obiektu mediatora, który zajmuje się interakcją obiektów gry i zapamiętuje położenie bieżącej komórki.
Gdy użytkownik przeciągnie figurę nad komórkę, możliwe są następujące działania:
- Za pomocą zdarzenia ACTION_DRAG_ENTERED ustaw wartość zmiennej „ZawieraDraggable” na true.
- Użyj zdarzenia ACTION_DRAG_EXITED, aby ustawić zmienną „zawieraDraggable” na wartość false.
- Wykorzystanie zdarzenia ACTION_DROP do poproszenia brokera o ważność zainstalowania figury w tej komórce.
Poniżej znajduje się kod, który implementuje opisaną logikę
@ Zastąp publiczny onolan onDrag (Widok, DragEvent dragEvent) (int dragAction \u003d dragEvent. GetAction (); Widok dragView \u003d (Widok) dragEvent. GetLocalState (); if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (zawieraDragable \u003d false;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (zawieraDragable \u003d true;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent))) (dragView. setVisibility (View. VISIBLE);)) else if (dragAction \u003d \u003d DragEvent. ACTION_DROP & amp; zawieraDragable) (checkForValidMove ((ChessBoardSquareLayoutView) widok, dragView); dragView. SetVisibility (View. VISIBLE);) return true;)Jak widać, niezależnie od tego, czy ruch jest prawidłowy, czy nie, ImageView jest ustawiany w widoczny sposób. Chciałem, aby użytkownik zobaczył, jak porusza się figura. Wspomniałem wcześniej, że komórka jest potomkiem LayoutView. Ma to na celu ułatwienie przejścia ImageView z komórki do komórki. Poniżej znajduje się kod metody checkForValidMove, która pokazuje, jak porusza się ImageView.
private void checkForValidMove (ChessBoardSquareLayoutView widok, widok dragView) (if (mediator. isValidMove (view)) (ViewGroup owner \u003d (ViewGroup) dragView. getParent (); właściciel. removeView (dragView); widok. addView (dragView); widok. setGravity (Gravity. CENTER); widok. ShowAsLanded (); mediator. HandleMove (widok);))Mam nadzieję, że ten artykuł pomoże ci w opracowaniu własnych projektów.
Już od dłuższego czasu istnieją funkcje JavaScript, które pozwalają nam tworzyć interfejsy przeciągania i upuszczania. Jednak żadna z tych implementacji nie jest natywna dla przeglądarki. HTML5 ma własną metodę tworzenia interfejsów przeciągnij i upuść (z niewielką pomocą JavaScript). W tym artykule dowiesz się, jak to osiągnąć ...
Obsługa przeglądarki
Przeciąganie i upuszczanie HTML5 jest obecnie obsługiwane przez wszystkie główne przeglądarki komputerowe (w tym IE (nawet częściowa obsługa jest dostępna w IE 5.5)), ale nie jest obsługiwane przez żadną z popularnych przeglądarek mobilnych.
Przeciągnij i upuść zdarzenia
Na każdym etapie przeciągania i upuszczania uruchamiane są różne zdarzenia, aby przeglądarka wiedziała, który kod JavaScript wykonać. Lista wydarzeń:
- dragStart: uruchamia się, gdy użytkownik zaczyna przeciągać elementy;
- dragEnter: uruchamiany, gdy przeciągany element jest najpierw przeciągany nad elementem docelowym;
- dragOver: uruchamiany, gdy wskaźnik myszy przesuwa się nad elementem, gdy występuje przeciąganie i upuszczanie;
- dragLeave: uruchamiany, gdy kursor użytkownika opuszcza element podczas przeciągania;
- przeciągnij: wchodzi w akcję za każdym razem, gdy poruszamy myszą podczas przeciągania naszego elementu;
- upuszczenie: uruchamiane po faktycznym upuszczeniu;
- dragEnd: uruchamiany, gdy użytkownik zwalnia przycisk myszy podczas przeciągania obiektu.
Dzięki wszystkim tym nasłuchiwaniom zdarzeń masz dobrą kontrolę nad działaniem interfejsu.
Obiekt DataTransfer
Tutaj dzieje się cała magia przeciągania i upuszczania. Ten obiekt zawiera dane wysłane przez operację przeciągania. Dane mogą być ustalane i uzyskiwane na różne sposoby, z których najważniejsze to:
- dataTransfer.effectAllowed \u003d wartość: zwraca dozwolone typy działań, możliwe wartości: brak, kopiowanie, copyLink, copyMove, link, linkMove, przenoszenie, wszystkie i niezainicjowane.
- dataTransfer.setData (format, dane): dodaje określone dane i format.
- dataTransfer.clearData (format): czyści wszystkie dane dla określonego formatu.
- dataTransfer.setDragImage (element, x, y): ustawia obraz, który chcesz przeciągnąć, wartości xiy wskazują, gdzie powinien znajdować się kursor myszy (0, 0 umieści go w lewym górnym rogu).
- data \u003d dataTransfer.getData (format): jak sugeruje nazwa, zwraca dane dla określonego formatu.
Tworzenie przykładu przeciągnij i upuść
Teraz zaczniemy tworzyć prosty przykład przeciągania i upuszczania. Jak widać, mamy dwa małe div i jeden duży, możemy przeciągnąć małe div do dużego, a nawet przenieść je z powrotem.
Przeciągnij i upuść obiekt
Pierwszą rzeczą, którą musimy zrobić, to stworzyć HTML. Robimy divs przeciągalne za pomocą atrybutu draggable:
Po wykonaniu tej czynności musimy zdefiniować funkcję JavaScript, która będzie działać, gdy tylko zaczniemy przenosić ten element:
Funkcja dragStart (ev) (ev.dataTransfer.effectAllowed \u003d "move"; ev.dataTransfer.setData ("Text", ev.target.getAttribute ("id")); ev.dataTransfer.setDragImage (ev.target, 100,100) ; return true;)
W tym kodzie najpierw deklarujemy, jaki rodzaj efektu dopuszczamy w operacji i ustawiamy go na ruch. W drugim wierszu ustawiamy dane do pracy, gdzie tekstem będzie Tekst, a wartością będzie identyfikator elementu, który przeciągamy. Następnie używamy metody setDragImage, która określa, że \u200b\u200bbędziemy przeciągać, a następnie, gdzie będzie kursor podczas przeciągania, a ponieważ kostki mają wymiary 200 na 200 pikseli, umieściliśmy je na środku. Na koniec zwracamy return true.
Upuść obiekt
Aby element zaakceptował upuszczenie, musi nasłuchiwać 3 różnych zdarzeń: dragEnter, dragOver, a także upuszczać zdarzenia. Dodajmy to do naszego HTML5 w div z dużym identyfikatorem:
Funkcja dragEnter (ev) (ev.preventDefault (); return true;) funkcja dragOver (ev) (ev.preventDefault ();)
W pierwszej funkcji określamy, co powinno się stać, gdy przeciągany element osiągnie pożądany element, w którym powinno nastąpić upuszczenie, w tym przypadku zapobiegamy tylko domyślnemu zachowaniu przeglądarki. Następnie w funkcji dragOver po prostu nie zezwalamy na wystąpienie domyślnego upuszczenia.
W następnej części zdefiniujemy funkcję, kiedy element zostanie „rzucony” w pożądany cel:
Funkcja dragDrop (ev) (var data \u003d ev.dataTransfer.getData („Text”); ev.target.appendChild (document.getElementById (data)); ev.stopPropagation (); return false;)
W tej ostatniej części najpierw ustawiamy zmienną danych, w której otrzymujemy wszystkie dane, które są dostępne dla formatu tekstowego, a następnie dodajemy dane do div, gdzie musimy „upuścić” element.
Ustaw sekcję upuszczania jako cel
Demo pokazuje, że dwa divy można przenieść z powrotem na swoje miejsca. Na szczęście dodanie kolejnego celu zrzutu jest o wiele łatwiejsze niż myślisz. Ponieważ mamy już te funkcje i wszystko, co musimy zrobić, to dodać detektory zdarzeń:
I to wystarczy, aby przeciągnąć i upuścić div w pierwotne miejsce.
Istnieje wiele aplikacji typu przeciągnij i upuść, które są zbudowane przy użyciu bibliotek JavaScript i często są łatwiejsze w użyciu. Mamy jednak nadzieję, że dzięki tej technice HTML5 i JavaScript zobaczysz w przyszłości potencjał rozwiązania swoich problemów.
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ągalne elementy za pomocą myszy, przeciągnij te elementy do upuszczalny element i upuść je, zwalniając przycisk myszy. Półprzezroczyste przedstawienie przeciągalne elementy podążają za wskaźnikiem podczas operacji przeciągania.
W przypadku witryn internetowych, rozszerzeń i aplikacji XUL można dostosować, które elementy mogą się stać przeciągalne, rodzaj informacji zwrotnej przeciągalne wytwarzają elementy, a upuszczalny elementy.
Omówienie przeciągania i upuszczania HTML zawiera opis interfejsów, podstawowe kroki dodawania obsługi przeciągania i upuszczania do aplikacji oraz podsumowanie interoperacyjności interfejsów.
Przeciągnij wydarzenia
| Zdarzenie | W module obsługi zdarzeń | Pożary, gdy ... |
|---|---|---|
| opór | ondrag | ... a przeciągnięty element (zaznaczenie elementu lub tekstu) jest przeciągane. |
| dragend | ondragend | ... kończy się operacja przeciągania (taka jak zwolnienie przycisku myszy lub naciśnięcie klawisza Esc; patrz Kończenie przeciągania.) |
| dragenter | ondragenter | ... przeciągnięty element wchodzi w prawidłowy cel upuszczenia. (Widzieć Określanie celów upuszczania.) |
| dragexit | ondragexit | ... element nie jest już bezpośrednim celem selekcji operacji przeciągania. |
| dragleave | ondragleave | ... przeciągnięty element pozostawia prawidłowy cel upuszczenia. |
| dragover | ondragover | ... przeciągany element jest przeciągany nad prawidłowym celem upuszczania co kilkaset milisekund. |
| dragstart | ondragstart | ... użytkownik zaczyna przeciągać element. (Widzieć Rozpoczęcie operacji przeciągania.) |
| upuszczać | kropla | ... element został upuszczony na prawidłowy cel upuszczenia. (Widzieć Wykonywanie zrzutu.) |
Uwaga: Podczas przeciągania pliku do przeglądarki z systemu operacyjnego nie są uruchamiane ani zdarzenia dragstart, ani przeciągania.
Interfejsy
Podstawy
Ta sekcja jest podsumowaniem podstawowych kroków dodawania funkcji przeciągania i upuszczania do aplikacji.
Zidentyfikuj, co jest przeciągalne
Robienie elementu przeciągalne wymaga dodania przeciągalne atrybut i ondragstart globalny moduł obsługi zdarzeń, jak pokazano w poniższym przykładzie kodu:
Ten element można przeciągać.
Aby uzyskać więcej informacji, zobacz:
Poradzić sobie z upuszczeniem efekt
Program obsługi dla upuszczać Zdarzenie może przetwarzać dane przeciągania w sposób specyficzny dla aplikacji.
Zwykle aplikacja korzysta z otrzymać dane () metodę pobierania elementów przeciągniętych, a następnie odpowiednio je przetwarzaj. Ponadto semantyka aplikacji może się różnić w zależności od wartości parametru
