W przypadku biblioteki VCL firma Borland zaimplementowała własną wersję interfejsu Drag&Drop (przetłumaczoną jako „przeciągnij”). Ten interfejs jest wewnętrzny - możesz wysyłać i odbierać dowolne kontrolki Delphi wewnątrz formularza "(z wyjątkiem samego formularza). Jest zaimplementowany bez użycia odpowiednich funkcji Windows API - muszą być używane podczas organizowania komunikacji z innymi zadaniami poprzez przeciąganie i upuszczanie .
Kliknięcie lewy przycisk myszką nad kontrolką, możemy ją "przeciągnąć" na dowolny inny element. Z punktu widzenia programisty oznacza to, że w momentach przeciągania i puszczania klawisza generowane są określone zdarzenia, które przekazują wszystkie niezbędne informacje – wskaźnik do przeciąganego obiektu, aktualne współrzędne kursora itp. Odbiorcą zdarzeń jest element na którym ten moment znajduje się kursor. Program obsługi takiego zdarzenia musi poinformować system, czy dana kontrolka akceptuje „wysyłanie”, czy nie. Zwolnienie przycisku na sterowniku odbiornika powoduje wyzwolenie jednego lub dwóch kolejnych zdarzeń, w zależności od gotowości odbiornika.
AnulujPrzeciągnij Anuluje bieżącą operację przeciągania i upuszczania lub przeciągania i dokowania.
Function FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;
Funkcja zwraca obiekt klasy bazowej TControl , który odnosi się do pozycji ekranu ze współrzędnymi określonymi przez parametr Pos. Ta funkcja służy do określenia potencjalnego odbiorcy operacji przeciągania i upuszczania lub przeciągania i dokowania. Jeśli dla określonej pozycji nie istnieje kontrolka okna, funkcja zwraca zero . Parametr AllowDisabled określa, czy wyłączone obiekty będą brane pod uwagę.
Funkcja IsDragObject(Sender: TObject ): Boolean ;
Funkcja określa, czy obiekt określony w parametrze Sender jest potomkiem klasy TDragObject . Ta funkcja może być używany jako parametr Source w procedurach obsługi zdarzeń OnDragOver i OnDockOver w celu określenia, czy przeciągany obiekt zostanie zaakceptowany. Funkcjonować również IsDragObjectmoże być używany jako parametr Source w procedurach obsługi zdarzeń OnDragDrop i OnDockDrop w celu poprawnej interpretacji przeciąganego obiektu.
DragMode, DragCursor właściwości, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metody, parametr Accept
Proces przeciągania informacji z jednego obiektu do drugiego za pomocą myszy jest szeroko stosowany w Widows.Możesz przenosić pliki między folderami, przenosić same foldery i nie tylko.
Wszystkie właściwości, metody i zdarzenia związane z procesem przeciągania i upuszczania są zdefiniowane w klasie TControl, która jest rodzicem wszystkich komponentów wizualnych Delphi. Dlatego są wspólne dla wszystkich komponentów.
Początek przeciągania jest określany przez właściwość DragMode, którą można ustawić w czasie projektowania lub programowo równą wartości dmManual lub dmAutomatic. Wartość dmAutomatic (automatyczne) określa automatyczne rozpoczęcie procesu przeciągania, gdy użytkownik kliknie przyciskiem myszy nad komponentem. Jednak w tym przypadku zdarzenie OnMouseDown skojarzone z naciśnięciem przez użytkownika przycisku myszy w ogóle nie występuje dla tego komponentu.
Interfejs do przesyłania i odbierania komponentów pojawił się dawno temu. Zapewnia interakcję między dwoma kontrolkami podczas wykonywania aplikacji. W takim przypadku można wykonać wszelkie niezbędne operacje. Pomimo prostoty implementacji i wieku rozwoju, wielu programistów (zwłaszcza początkujących) uważa ten mechanizm za niejasny i egzotyczny. Jednak użycie przeciągania i upuszczania może być bardzo przydatne i łatwe do wdrożenia. Teraz to zweryfikujemy.
Aby mechanizm działał, należy odpowiednio skonfigurować dwie kontrolki. Jeden musi być źródłem (Source), drugi - odbiorcą (Target). W takim przypadku źródło nigdzie się nie przemieszcza, a jedynie jest rejestrowane jako takie w mechanizmie.
Uwierz mi, łatwo jest się zmienić Współrzędne X,Y, przekazane w parametrach zdarzeń OnDragOver i OnDragDrop do współrzędnych formularza.
Pracuj z właściwościami Left i Top komponentu, nad którym znajduje się kursor. Podam prosty przykład. Umieść komponent Nota w formularzu i przypisz Wyrównaj właściwość alTop wartość. Umieść panel na formularzu, ustaw również właściwość Align na alTop i ustaw właściwość Height na małą wartość, powiedzmy 6 lub 7 pikseli. Ustaw DragMode na dmAutomatica i DragCursor na crVSplit. Umieść inny składnik Nota i ustaw Align na alClient. Wybierz obie notatki jednocześnie, panel i utwórz wspólny program obsługi zdarzeń OnDragOver, jak pokazano poniżej:
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 utworzyć utworzyć kopię zapasową niektóre zdjęcia 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 Właściwe miejsce w ta aplikacja lub inny otwarty 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. Dotykać dodatkowe aplikacje, który również trzeba przenieść.
3. Przeciągnij te aplikacje na stronę lub folder, w którym mają się znajdować, i upuść je.
Od dłuższego czasu istnieją funkcje JavaScript, które pozwalają nam tworzyć interfejsy typu „przeciągnij i upuść”. Ale żadna z tych implementacji nie jest natywna dla przeglądarki.HTML5 ma swój własny sposób tworzenia interfejsów przeciągnij i upuść (z niewielką pomocą JavaScript). W tym artykule powiemy, jak można 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 IE 5.5 ma częściową obsługę)), ale nie jest obsługiwane przez żadną z popularnych przeglądarek mobilnych.
Wydarzenia typu „przeciągnij i upuść”
Na każdym etapie przeciągania i upuszczania uruchamiane są różne zdarzenia, aby poinformować przeglądarkę, który kod JavaScript ma zostać wykonany. Lista wydarzeń:
- dragStart: uruchamiany, gdy użytkownik zaczyna przeciągać elementy;
- dragEnter: uruchamiane, gdy przeciągany element jest po raz pierwszy przeciągany nad elementem docelowym;
- dragOver: uruchamiany, gdy mysz przesuwa się nad elementem podczas przeciągania;
- dragLeave: uruchamiane, jeśli kursor użytkownika opuści element podczas przeciągania;
- drag: uruchamiane za każdym razem, gdy poruszamy myszą podczas przeciągania naszego elementu;
- drop: uruchamiany w momencie rzeczywistego upuszczenia;
- dragEnd: uruchamiane, gdy użytkownik zwolni przycisk myszy podczas przeciągania obiektu.
Dzięki tym wszystkim detektorom zdarzeń masz dużą kontrolę nad działaniem interfejsu.
obiekt transferu danych
To tutaj dzieje się cała magia drag&drop. Ten obiekt zawiera dane przesłane przez operację przeciągania. Dane można ustawiać i pobierać różne sposoby, z których najważniejsze to:
- dataTransfer.effectAllowed=value: zwraca dozwolone typy akcji, możliwa wartość: brak, kopiuj, kopiujLink, kopiujPrzenieś, łącze, łączePrzenieś, przenieś, 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 x i y wskazują, gdzie powinien znajdować się kursor myszy (0, 0 ustawia go w lewym górnym rogu).
- data = dataTransfer.getData(format) : Jak sama nazwa wskazuje, zwraca dane dla określonego formatu.
Tworzenie przykładu przeciągnij i upuść
Teraz zaczniemy tworzyć prosty przykład drag&drop. Jak widać, mamy dwa małe divy i jeden duży, możemy przeciągnąć małe divy do dużego, a nawet przesunąć je z powrotem.
Przeciąganie obiektu
Pierwszą rzeczą, którą musimy zrobić, to stworzyć HTML. Sprawiamy, że elementy div można przeciągać za pomocą atrybutu draggable:
Gdy to zrobimy, musimy zdefiniować funkcję JavaScript, która uruchomi się, gdy tylko zaczniemy przenosić ten element:
Funkcja dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; zwróć prawdę; )
W tym kodzie najpierw deklarujemy, jaki rodzaj efektu dopuszczamy w operacji i ustawiamy go, aby się poruszał. W drugim wierszu ustawiamy dane do pracy, gdzie tekstem będzie Tekst, a wartością będzie ID elementu, który przeciągamy. Następnie używamy metody setDragImage, która określa, co przeciągniemy, a następnie gdzie będzie kursor podczas przeciągania, a ponieważ kostki mają 200 na 200 pikseli, umieściliśmy je w samym środku. Na koniec zwracamy true.
Upuść obiekt
Aby element zaakceptował upuszczenie, musi nasłuchiwać 3 różnych zdarzeń: dragEnter, dragOver i zdarzenia drop. Dodajmy więc to do naszego div HTML5 z identyfikatorem big:
funkcja dragEnter(ev) ( ev.preventDefault(); return true; ) funkcja dragOver(ev) ( ev.preventDefault(); )
W pierwszej funkcji definiujemy, co powinno się stać, gdy przeciągany element dotrze do pożądanego elementu, w którym powinno nastąpić upuszczenie, w tym przypadku tylko uniemożliwiamy domyślne zachowanie przeglądarki. Następnie w funkcji dragOver domyślnie nie pozwalamy na upuszczanie.
W kolejnej części definiujemy funkcję, kiedy element jest „rzucany” na żądany cel:
Funkcja dragDrop(ev) ( var data = ev.dataTransfer.getData("Tekst"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )
W tej ostatniej części najpierw ustawiamy zmienną data, w której otrzymujemy wszystkie dostępne dane format tekstu, a następnie dodajemy dane do div, w którym chcemy upuścić element.
Ustaw sekcję zrzutu jako cel
Demo pokazuje, że dwa div można przenieść z powrotem na miejsce. Na szczęście dodanie kolejnego celu upuszczenia jest o wiele łatwiejsze, niż mogłoby się wydawać. Ponieważ mamy już te funkcje i wystarczy dodać detektory zdarzeń:
I to wystarczy, aby przeciągnąć div z powrotem na miejsce.
Istnieje wiele aplikacji typu „przeciągnij i upuść”, które są zbudowane z przy użyciu JavaScript biblioteki i często są łatwiejsze w użyciu. Ale mamy nadzieję, że w tym HTML5 i technika JavaScript, zobaczysz przyszły potencjał rozwiązywania 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ą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 dostosuj, które elementy mogą się stać 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 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
Techniki przeciągania i upuszczania ewoluowały przez wiele lat. Nic dziwnego, wraz ze wzrostem liczby programistów tworzących wtyczki z otwartymi kod źródłowy(np. dla jQuery) wskrzeszone zostają stare metody. Biblioteka JavaScript jest wysoce adaptacyjna i oferuje wiele ulepszeń w dobie technologii internetowych.
W tym samouczku stworzymy skrypt, którego będziemy mogli użyć do tworzenia dynamicznych prostokątów metodą „przeciągnij i upuść” na naszej stronie internetowej. Proces jest kontrolowany przez jQuery. Takie skrypty oszczędzają czas dostarczając gotową funkcjonalność! A bibliotekę przeciągnij i upuść można wykorzystać w innych projektach.
Przygotowujemy treści
Przede wszystkim przygotujemy dla projektu małą stronę internetową. W folderze projektu musisz utworzyć dwa katalogi o godnych uwagi nazwach "js" oraz "css" i pusty plik index.html . Kod będzie bardzo prosty, dzięki czemu będzie jasny pomysł na pracę i jest punkt do dalszego rozwoju.
Poniżej znajduje się kod naszego plik HTML. W rozdziale głowa dołączamy 3 skrypty. Główny skrypt jQuery zostanie załadowany z serwera Google Code. dołączony jest również nasz plik style.css, który zawiera główne właściwości formowania wygląd zewnętrzny nasz dokument.
pociągnij mnie
Ja też mogę zostać przeciągnięty
PS Możesz mnie podrzucić wszędzie!