ondragleave event

/ * When the drag trigger * /
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData () method to set the data type and drag data
event.dataTransfer.setData ( "Text", event.target.id);
// Output some text while dragging p element
. Document.getElementById ( "demo") innerHTML = "start dragging p element.";
// Modify the transparency of the drag element
event.target.style.opacity = "0.4";
});
// P drag element at the same time, change the color of text output
document.addEventListener ( "drag", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// End p element output when dragging some text elements and reset transparency
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "complete p drag element";
event.target.style.opacity = "1";
});
/ * After the completion of the drag trigger * /
// Complete the drag element when p enter droptarget, border styles change div
document.addEventListener ( "dragenter", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "3px dotted red";
}
});
// By default, data / elements can not be dragged and dropped in other elements. For drop We must prevent default processing elements
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// When drag and drop the p elements leave droptarget, reset div border styles
document.addEventListener ( "dragleave", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
}
});
/ * For drop, prevent default processing data browser (in the drop link is enabled by default)
Reset output border color and text color of the DIV
Use dataTransfer.getData () method to get dropped data
Mop data element id ( "drag1")
Additional elements to the drag 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));
}
});