ondrag ɗanin
Definition and usage
The ondrag event occurs when an element or text selection is dragged.
Drag and drop is a very common feature in HTML5. It is when you 'grasp' an object and drag it to different locations. To learn more, please read our HTML5 ɗanin ɗaukaHTML tutorial.
Kwalli:To make an element draggable, use the global HTML5 draggable attribute
Tip:By default, links and images are draggable without the draggable attribute.
Many events are used at different stages of drag-and-drop operations, and may occur:
Events triggered on the draggable target (source element):
- ondragstart - Occurs when the user starts dragging the element
- - Occurs when the element is being dragged
- ondragend - Occurs when the user completes dragging the element
Events triggered on the target location:
- ondragenter - Occurs when the dragged element enters the target location
- ondragover - Occurs when the dragged element is on the target location
- ondragleave - Occurs when the dragged element leaves the target location
- ondrop - Occurs when the dragged element is placed on the target location
Kwalli:When dragging an element, the ondrag event triggers every 350 milliseconds.
Example
Drag <p> element, JavaScript yana a kai:
<p draggable="true" ondrag="myFunction(event)">Drag me!</p>
Page baiya da kei TIY tafirin.
Grammar
In HTML:
<element ondrag="myScript">
In JavaScript:
object.ondrag = function(){myScript};
In JavaScript, use addEventListener() method:
object.addEventListener("drag", myScript);
});
});
document.getElementById("demo").innerHTML = "Kwakarci hanyar girmen da "Finished dragging the p element.";
event.target.style.opacity = "1";
});
/* ----------------- Events da a kwararce a cikin gudanar da a dace ----------------- */
// Dem ta ce kwararce DIV style kuma yadda p da a dora yake gudanar
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// A cikin zirgar tsawon lokaci, ana gudanar da a dace data/element a cikin kudun. domin a sanya a dace, a kwararce a gudanar da kudun
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Dem ta ce kwararce DIV style kuma yadda p da a dora yake gudanar
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* A cikin rai - Kwararce browsers domin a taimakar da a kwarara data (a kwarara kama likita lokaci da a dora) */
Gyara launin tekun da a ciki da launin duniya na DIV
Gyara data da a dora a kan methodin dataTransfer.getData()
Data da a dora shine id na kudun da a dora ("drag1")
Anfaka kudun kiyuwarin da a dora a kan kudun da a gudanar
*/
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>
