An interesting drag-and-drop effect recently seen in HTML5, here is a simple drag-and-drop effect on the deleted element.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> drag and drop operations </title>
<style>
li{list-style:none;width:100px; height:100px; background:red; margin-bottom:20px;}
#div1 {width:200px; height:200px; background:red; margin:0 Auto;}
</style>
<script>
Window.onload = function ()
{
var Oul = document.getElementsByTagName ("ul") [0];
var aLi = oul.getelementsbytagname ("Li");
var odiv = document.getElementById ("Div1");
var i = 0;
for (var i=0; i<ali.length; i++)
{
Ali[i].index = i;
Ali[i].ondragstart =function (EV)
{
var ev = EV | | window.event;
Ev.dataTransfer.setData (' name ', This.index);
This.style.background = "green";
};
Ali[i].ondrag =function ()//start and end continuous triggering
{
Document.title = i++;
};
Ali[i].ondragend =function ()
{
This.style.background = "Red";
};
}
Odiv.ondragenter = function ()
{
This.style.background = "Blue";
}
Odiv.ondragleave = function ()
{
This.style.background = "Red";
}
Odiv.ondragover = function (EV)//start and end continuous triggering
{
To trigger a drop event, you must block the default event in the OnDragOver event
Document.title = i++;
Ev.preventdefault ();
}
odiv.ondrop= function (EV)
{
This.style.background = "Yellow";
Alert (Ev.dataTransfer.getData ("name"));
Oul.removechild (Ali[ev.datatransfer.getdata ("name")]);
for (var i=0; i<ali.length; i++)
{
Ali[i].index = i;
}
}
}
</script>
<body>
<ul>
<li draggable= "true" ></li>
<li draggable= "true" ></li>
<li draggable= "true" ></li>
<li draggable= "true" ></li>
</ul>
<div id= "Div1" ></div>
</body>
It is a small picture of the above drag and drop in the generous box below to release the mouse to delete the current drag and drop of the thumbnail.
HTML5 drag-and-drop operation
