ondragstart- Ereignis
Beispiel
Führen Sie ein JavaScript aus, wenn der Benutzer beginnt, ein <p>-Element zu ziehen:
<p draggable="true" ondragstart="myFunction(event)">Drag me!</p>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das Ereignis ondragstart tritt auf, wenn der Benutzer beginnt, ein Element oder eine Textauswahl zu ziehen.
Drag & Drop ist eine sehr verbreitete Funktion in HTML5. Es ist, wenn Sie ein Objekt "greifen" und es an eine andere Stelle ziehen. Weitere Informationen finden Sie in unserem HTML-Tutorial zu HTML5 Drag and Drop .
Hinweis: Um ein Element ziehbar zu machen, verwenden Sie das globale HTML5 - Attribut Draggable .
Tipp: Links und Bilder sind standardmäßig ziehbar und benötigen das Attribut ziehbar nicht.
Es gibt viele Ereignisse, die in den verschiedenen Phasen eines Drag-and-Drop-Vorgangs verwendet werden und auftreten können:
- Auf dem ziehbaren Ziel (dem Quellelement) ausgelöste Ereignisse :
- Auf dem Drop-Target ausgelöste Ereignisse:
- ondragenter - tritt auf, wenn das gezogene Element in das Drop-Ziel eintritt
- ondragoover – tritt auf, wenn sich das gezogene Element über dem Drop-Ziel befindet
- ondragleave – tritt auf, wenn das gezogene Element das Ablageziel verlässt
- ondrop - tritt auf, wenn das gezogene Element auf dem Drop-Ziel abgelegt wird
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Ereignis vollständig unterstützt.
| Event | |||||
|---|---|---|---|---|---|
| ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntax
Im HTML-Format:
<element ondragstart="myScript">
In JavaScript:
object.ondragstart = function(){myScript};
Verwenden Sie in JavaScript die Methode addEventListener():
object.addEventListener("dragstart", myScript);
Hinweis: Die Methode addEventListener() wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Technische Details
| Bläschen: | ja |
|---|---|
| kündbar: | ja |
| Ereignistyp: | DragEvent |
| Unterstützte HTML-Tags: | Alle HTML-Elemente |
| DOM-Version: | Ereignisse der Ebene 3 |
Mehr Beispiele
Beispiel
Eine Demonstration ALLER möglichen Drag-and-Drop-Ereignisse:
<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>
Verwandte Seiten
HTML-Tutorial: HTML5-Drag-and-Drop
HTML-Referenz: HTML-Attribut zum Ziehen