最近在看html5时看到的一个有意思的拖放效果，这里是简单的一个拖放删除元素的效果。
<!DOCTYPE html>
<html><head>
<Meta charset="UTF-8">
<title>拖放操作</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() //开始与结束之间连续触发
{
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) //开始与结束之间连续触发
{
//要想触发drop事件，必须要在ondragover事件中阻止默认事件
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>
</head>
<body>
<ul>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
</ul>
<div id="div1"></div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
