událost ondragenter
Příklad
Spusťte JavaScript, když přetahovatelný prvek vstoupí do cíle přetažení:
<div ondragenter="myFunction(event)"></div>
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
K události ondragenter dochází, když přetahovatelný prvek nebo výběr textu vstoupí do platného cíle přetažení.
Události ondragenter a ondragleave mohou uživateli pomoci pochopit, že přetahovatelný prvek se chystá vstoupit nebo opustit cíl upuštění. To lze provést například nastavením barvy pozadí, když přetahovatelný prvek vstoupí do cíle přetažení, a odstraněním barvy, když se prvek přesune z cíle.
Drag and drop je v HTML5 velmi běžná funkce. Je to, když "chytíte" objekt a přetáhnete jej na jiné místo. Další informace najdete v našem HTML Tutoriálu o HTML5 Drag and Drop .
Poznámka: Chcete-li, aby byl prvek přetahovatelný, použijte globální atribut přetahování HTML5.
Tip: Odkazy a obrázky lze ve výchozím nastavení přetáhnout a nepotřebují atribut draggable.
Existuje mnoho událostí, které se používají a mohou nastat v různých fázích operace přetažení:
- Události spuštěné na přetahovatelném cíli (zdrojový prvek) :
- ondragstart - nastane, když uživatel začne přetahovat prvek
- ondrag - nastane, když je prvek přetažen
- ondragend - nastane, když uživatel dokončí přetahování prvku
- Události vypálené na cíl shozu:
- ondragenter - nastane, když přetažený prvek vstoupí do cíle přetažení
- ondragover - nastane, když je přetažený prvek nad cílem přetažení
- ondragleave - nastane, když přetažený prvek opustí cíl přetažení
- ondrop - nastane, když je přetažený prvek upuštěn na cíl přetažení
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která událost plně podporuje.
Event | |||||
---|---|---|---|---|---|
ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntax
V HTML:
<element ondragenter="myScript">
V JavaScriptu:
object.ondragenter = function(){myScript};
V JavaScriptu pomocí metody addEventListener():
object.addEventListener("dragenter", myScript);
Poznámka: Metoda addEventListener() není podporována v aplikaci Internet Explorer 8 a starších verzích.
Technické údaje
bubliny: | Ano |
---|---|
Zrušitelné: | Ano |
Typ události: | DragEvent |
Podporované HTML tagy: | Všechny prvky HTML |
Verze DOM: | Události úrovně 3 |
Další příklady
Příklad
Ukázka VŠECH možných akcí přetažení:
<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>
Související stránky
HTML kurz: HTML5 Drag and Drop
HTML reference: HTML přetahovatelný atribut