HTML5 - HTML
Przeciągnij i upuść <... draggable>
W jaki sposób zablokować przeciąganie elementów myszką?
- Elementy bez znacznika zamykającego (np. IMG):
<element draggable="przeciąganie">
- Elementy ze znacznikiem zamykającym (np. A):
<element draggable="przeciąganie">...</element>
Pozwalają sterować mechanizmem przeciągnij-i-upuść (ang. drag-and-drop). Zwykle polega on na wskazaniu przeciąganego elementu myszką, wciśnięciu i przytrzymaniu przycisku myszki, przeniesieniu elementu w inne miejsce i zwolnieniu przycisku myszki.
Chociaż do realizacji mechanizmu przeciągnij-i-upuść na stronach WWW zwykle konieczna jest znajomość języka JavaScript, to atrybut ten może być przydatny nawet w czystym HTML. Niektóre elementy każdej strony - jak np. odnośniki hipertekstowe - domyślnie mogą być przeciągane przez użytkowników. Jeśli taki link zostanie upuszczony na pasku adresu przeglądarki, nastąpi jego wczytanie. Można je również upuszczać na pola tekstowe formularzy. W niektórych przypadkach możemy jednak nie chcieć takiego zachowania. Aby zablokować przypadkowe przeciągnięcie elementu przez użytkownika wystarczy nadać mu atrybut draggable="false".
Oprócz tego do sterowania mechanizmem przeciągnij-i-upuść służą zdarzenia:
- ondragstart - zapoczątkowanie operacji przeciągania
- ondrag - kontynuacja operacji przeciągania
- ondragenter - przeciągnięcie obiektu ponad element, gdzie może zostać on upuszczony
- ondragexit, ondragleave - przeciągnięcie obiektu z elementu, gdzie mógł on być upuszczony
- ondragover - przeciąganie elementu ponad obiektem, gdzie może on zostać upuszczony
- ondrop, ondragend - zwolnienie przycisku myszki podczas operacji przeciągania
Pytania i odpowiedzi <div draggable>
Co oznacza przeciąganie w HTML?
Przeciąganie w HTML odnosi się do funkcji przeciągania i upuszczania, która pozwala użytkownikom przenosić elementy z jednego miejsca do innego na stronie internetowej. Dzięki zastosowaniu API Drag and Drop, można oznaczyć elementy jako przeciągane za pomocą atrybutu draggable="true", a następnie obsługiwać zdarzenia takie jak dragstart, dragover, i drop, aby określić, co powinno się stać podczas przeciągania i upuszczania tych elementów.
Jak działa przeciąganie i upuszczanie kodu HTML?
Przeciąganie i upuszczanie w HTML jest obsługiwane przez API Drag and Drop, które umożliwia użytkownikom przeciąganie elementów z jednego miejsca i upuszczanie ich w innym. Do implementacji wykorzystuje się zdarzenia takie jak dragstart, dragover, i drop. Przykład prostego kodu: <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', event.target.id)" id="dragItem">Przeciągnij mnie</div> <div ondragover="event.preventDefault()" ondrop="handleDrop(event)" id="dropZone">Upuść tutaj</div>.
Jak umieścić przeciąganie w HTML?
Aby umożliwić przeciąganie elementu w HTML, należy ustawić atrybut draggable="true" na elemencie, który ma być przeciągany, oraz obsłużyć zdarzenia dragstart, dragover, i drop. Na przykład: <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', event.target.id)" id="dragItem">Przeciągnij mnie</div><div ondragover="event.preventDefault()" ondrop="handleDrop(event)" id="dropZone">Upuść tutaj</div>.