z HTML5 możliwe jest przeciąganie i upuszczanie elementów HTML wewnątrz strony HTML. Poprzez JavaScript event listeners możesz decydować, co się stanie, gdy użytkownik przeciągnie i upuści elementy.
podczas przeciągania i upuszczania elementy HTML mogą przyjmować dwie role:
- Przeciągalne
- drop target / drop zone.
przeciągalny element jest elementem, który Użytkownik powinien być w stanie przeciągnąć wokół strony HTML i upuścić gdzieś, aby wykonać jakąś akcję. Może to być jeden lub więcej elementów.,
drop target lub drop zone to element, na który zrzucane są przeciągalne elementy.
zdarzenia przeciągania i upuszczania
aby kontrolować, co się dzieje podczas przeciągania i upuszczania elementów HTML, musisz wykonać 3 kroki:
- Ustaw elementy HTML na przeciągalne.,
- Załącz słuchacze zdarzeń do przeciąganych elementów HTML
- Załącz słuchacze zdarzeń do upuszczanych elementów HTML
zdarzenia i atrybuty są zilustrowane tutaj:
najpierw ustawisz atrybutdraggable="true" atrybut na elementach HTML, aby można było przeciągać.
Po Drugie dołączasz słuchacze zdarzeń do przeciąganego elementu dla zdarzeńdragstart Idragend., Wewnątrz tych detektorów zdarzeń można zaimplementować, co się stanie, gdy użytkownik zacznie przeciągać element i gdy przeciąganie się skończy.
Po Trzecie dołączasz słuchacze zdarzeń do elementu drop target. Wydarzenia, których możesz słuchać, to dragenter, dragover, dragleaveI drop.
Zdarzeniedragenter jest wywoływane, gdy użytkownik przeciąga przeciągacz na cel upuszczania., To zdarzenie zostanie wywołane tylko wtedy, gdy przeciągalny element zmieni się z „poza” na „ponad”, co jest zazwyczaj określane przez położenie kursora myszy.
gdy element przeciągany znajduje się nad celem upuszczania, Zdarzeniedragover jest wywołane i trwa tak długo, jak element przeciągany jest przeciągany nad celem upuszczania.
Jeśli użytkownik ponownie przeciągnie obiekt z celu upuszczania, zostanie wywołane zdarzeniedragleave.
Jeśli użytkownik upuści przeciągany obiekt na obiekt docelowy, zostanie wywołane zdarzeniedrop.,
przeciągnij i upuść przykład zdarzenia
oto przykład, którym możesz grać. Spróbuj przeciągnąć logo HTML5 na cel upuszczania i zobacz, co się stanie. Spróbuj upuścić obraz i przeciągnąć go ponownie.
dragend:
dragenter:
dragover:
dragleave:
Drop:
przeciągnij i upuść kod
przyjrzyjmy się, jak obsługiwać zdarzenia przeciągnij i upuść., Aby zobaczyć, że najpierw utworzymy<img> element, który możemy przeciągnąć. Oto kod HTML do tego:
<img src="http://tutorials.jenkov.com/html5/..." draggable="true">
gdy mamy przeciągalny element, potrzebujemy drop target. Użyję <div> element:
<div style="width: 200px; height: 200px;">Drop here</div>
gdy mamy element przeciągalny i element drop target, musimy dołączyć słuchaczy zdarzeń., Poniżej znajduje się kod JavaScript:
dragStart()funkcja wywołujeevent.dataTransfer.setData() w celu ustawienia danych, które są przesyłane do obiektu docelowego po upuszczeniu elementu. Jakiekolwiek dane potrzebne do prawidłowego zakończenia akcji upuszczania, ustaw je tutaj. Ustawiasz zarówno dane, jak i ich typ mime.
funkcja dragOver() idrop() obsługa zdarzeń wywołująevent.preventDefault() I zwracają false. Jest to konieczne, aby przeciąganie i upuszczanie działało poprawnie., Przeglądarka może mieć pewne domyślne zachowanie przeciągania i upuszczania, które należy wyłączyć, aby Kod działał.
zauważ również, że drop() funkcja obsługi zdarzeń odczytuje zestaw danych w dragStart() poprzez wywołanie event.dataTransfer.getData(). Przekazuje typ MIME danych jako parametr, aby je poprawnie wyodrębnić.
to wszystko, co jest potrzebne, aby zaimplementować przeciąganie i upuszczanie w HTML5. Możesz sprawić, że będzie to nieco bardziej przyjemne wizualnie, jak zobaczymy w następnej sekcji.,
wizualne informacje zwrotne
możesz użyć funkcji przeciągnij i upuść, aby dać użytkownikowi bardziej wyraźne informacje zwrotne.
przede wszystkim możesz zaznaczyć przeciągany element, aby użytkownik mógł zobaczyć, który element przeciąga. Jeśli wiele elementów wygląda tak samo i wszystkie mogą być przeciągane, dobrze jest, aby użytkownik zobaczył, który z nich jest przeciągany. Można to zrobić w odpowiedzi na zdarzenie dragstart. Oto przykład:
Po zakończeniu przeciągania chcemy ponownie usunąć obramowanie., Odbywa się to w odpowiedzi na zdarzenie dragend. Oto jak to się robi:
teraz użytkownik otrzyma wizualną informację zwrotną pokazującą, który element jest przeciągany.
chcemy również pokazać użytkownikowi, że możliwe jest upuszczenie przeciągalnego elementu, gdy zostanie on przeciągnięty przez cel upuszczenia. Ponownie zmienimy obramowanie elementu. Zrobimy to w odpowiedzi na dragenter, dragleave I drop., Oto jak to jest zrobione:
teraz granica celu upuszczania stanie się zielona i przerywana, gdy przeciągany element zostanie przeciągnięty. Obramowanie zostanie usunięte, gdy przeciągalny element zostanie ponownie przeciągnięty lub jeśli element zostanie upuszczony na cel upuszczania.
powyższy przykład nie pokazuje funkcji obsługi zdarzeńdragOver(), ale upewnij się, że dodałeś ją, aby zapobiec domyślnemu zachowaniu się przeglądarki.,
oto Pełny kod po dodaniu wizualnej informacji zwrotnej:
obiekt DataTransfer, effectsAllowed, dropEffect i setDragImage ()
możesz zwiększyć wizualną informację zwrotną przekazywaną użytkownikowi podczas operacji przeciągania i upuszczania za pomocąDataTransfer obiekt. ObiektDataTransfer ma 2 atrybuty i jedną funkcję, której możesz użyć do tego celu., Są to:
- effectsAllowed
- dropEffect
- setDragImage()
masz dostęp do obiektu DataTransfer w dragstart I drop obiekty zdarzeń. Oto przykład dragstart funkcja listener, która ustawia effectsAllowed właściwość na DataTransfer obiekt:
effectsAllowed właściwość jest używana przez przeglądarki do zmiany kursora myszy, aby pokazać, co rodzaj akcji jest wykonywany podczas przeciągania i upuszczania elementu., Zazwyczaj kursor myszy zmienia się, gdy przeciągany element znajduje się nad celem upuszczenia. Nie wcześniej. Poprawne wartości dla właściwości effectsAllowed to:
- none
- copy
- move
- copyMove
- linkMove
- copylink
- unitialized
The dropEffect ma pokazywać użytkownikowi (za pomocą kursora), co się dzieje, gdy kursor najedzie na cel, ale w momencie pisania (luty 2012). 2014) przeglądarki zdają się ignorować to., Poprawne wartości dla właściwości dropEffect to:
- none
- copy
- link
- move
funkcjasetDragImage(image, x, y) może być używana do ustawiania obrazu wyświetlanego przez przeglądarkę, gdy użytkownik przeciąga element. Domyślnie przeglądarka wyświetla półprzezroczystą kopię oryginalnego elementu, ale jeśli chcesz inny obraz, możesz ustawić inny obraz za pomocą tej funkcji. Właściwości x I y mogą być używane do ustawiania przesunięć lokalizacji obrazu podczas wyświetlania., Domyślnie lewy górny róg obrazu przeciągania znajduje się na końcu wskaźnika myszy. Ustawiając różne właściwości x I y możesz to zmienić. Możesz użyć dodatnich lub ujemnych x I y offsetów.
oto przykład kodu pokazujący, jak ustawić obrazek przeciągania wewnątrzdragStart() funkcja słuchacza zdarzeń:
oto przykład, który pozwala na odtwarzanie różnych ustawień obiektuDataTransfer., Spróbuj zmienić effectsAllowed I przeciągnij obraz i zobacz, co się stanie, gdy przeciągniesz logo HTML5 w dół nad div.
przeciąganie plików do przeglądarki
możliwe jest przeciąganie plików do przeglądarki z systemu plików i odczytywanie nazwy i zawartości przeciągane pliki z JavaScript. Robisz to za pośrednictwem HTML5 File API., Poniżej znajduje się plik docelowy, który wykrywa nazwę przeciągniętego pliku:
var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i Notice how the
function does not call the function, but instead accesses the property of the . The property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon). You can read more about how to access the dragged files in my HTML5 file API tutorial.