ondragstart Event
Voorbeeld
Voer 'n JavaScript uit wanneer die gebruiker 'n <p>-element begin sleep:
<p draggable="true" ondragstart="myFunction(event)">Drag me!</p>
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die ondragstart-gebeurtenis vind plaas wanneer die gebruiker begin om 'n element of tekskeuse te sleep.
Sleep en los is 'n baie algemene kenmerk in HTML5. Dit is wanneer jy 'n voorwerp "gryp" en dit na 'n ander plek sleep. Vir meer inligting, sien ons HTML-tutoriaal oor HTML5 Sleep en Los .
Let wel: Om 'n element sleepbaar te maak, gebruik die globale HTML5 sleep eienskap.
Wenk: Skakels en prente is by verstek sleepbaar en het nie die sleep-kenmerk nodig nie.
Daar is baie gebeurtenisse wat gebruik word, en kan voorkom, in die verskillende stadiums van 'n sleep-en-los-bewerking:
- Gebeurtenisse wat op die sleepbare teiken (die bronelement) afgevuur is :
- Gebeurtenisse wat op die valteiken geskiet is:
- ondragenter - vind plaas wanneer die gesleepde element die drop-teiken binnegaan
- ondragover - vind plaas wanneer die gesleepde element oor die drop-teiken is
- ondragleave - vind plaas wanneer die gesleepde element die drop-teiken verlaat
- ondrop - vind plaas wanneer die gesleepde element op die drop-teiken laat val word
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die geleentheid ten volle ondersteun.
| Event | |||||
|---|---|---|---|---|---|
| ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Sintaksis
In HTML:
<element ondragstart="myScript">
In JavaScript:
object.ondragstart = function(){myScript};
In JavaScript, gebruik die addEventListener() metode:
object.addEventListener("dragstart", myScript);
Let wel: Die addEventListener() metode word nie in Internet Explorer 8 en vroeër weergawes ondersteun nie.
Tegniese besonderhede
| borrels: | Ja |
|---|---|
| Kanselleerbaar: | Ja |
| Soort gebeurtenis: | DragEvent |
| Ondersteunde HTML-etikette: | Alle HTML-elemente |
| DOM weergawe: | Vlak 3-geleenthede |
Meer voorbeelde
Voorbeeld
'n Demonstrasie van ALLE moontlike sleep-en-los-gebeure:
<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>
Verwante bladsye
HTML-tutoriaal: HTML5 Sleep en Drop
HTML-verwysing: HTML-dragbare kenmerk