Wydarzenie ondragstart
Przykład
Wykonaj JavaScript, gdy użytkownik zacznie przeciągać element <p>:
<p draggable="true" ondragstart="myFunction(event)">Drag me!</p>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie ondragstart występuje, gdy użytkownik zaczyna przeciągać element lub zaznaczony tekst.
Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Dzieje się tak, gdy „chwycisz” obiekt i przeciągniesz go w inne miejsce. Więcej informacji znajdziesz w naszym samouczku HTML dotyczącym przeciągania i upuszczania HTML5 .
Uwaga: aby umożliwić przeciąganie elementu, użyj globalnego atrybutu przeciągania HTML5.
Porada: Łącza i obrazy można domyślnie przeciągać i nie wymagają one atrybutu przeciągania.
Istnieje wiele zdarzeń, które są używane i mogą wystąpić na różnych etapach operacji przeciągania i upuszczania:
- Zdarzenia uruchomione na przeciąganym celu (element źródłowy) :
- Zdarzenia wystrzeliwane na cel zrzutu:
- ondragenter - występuje, gdy przeciągany element wchodzi w cel upuszczania
- ondragover - występuje, gdy przeciągany element znajduje się nad celem upuszczania
- ondragleave - występuje, gdy przeciągany element opuszcza cel upuszczania
- ondrop - występuje, gdy przeciągany element jest upuszczany na cel upuszczania
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
Event | |||||
---|---|---|---|---|---|
ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Składnia
W HTML:
<element ondragstart="myScript">
W JavaScript:
object.ondragstart = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("dragstart", myScript);
Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
Bąbelki: | tak |
---|---|
Możliwość anulowania: | tak |
Typ wydarzenia: | DragEvent |
Obsługiwane tagi HTML: | Wszystkie elementy HTML |
Wersja DOM: | Wydarzenia poziomu 3 |
Więcej przykładów
Przykład
Demonstracja WSZYSTKICH możliwych zdarzeń przeciągania i upuszczania:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
Powiązane strony
Samouczek HTML: przeciąganie i upuszczanie HTML5
Odniesienie HTML: przeciągany atrybut HTML