html5拖放操作

时间：2015-06-09 09:59:55 阅读：93 评论：0 收藏：0 [点我收藏+]

标签：drag drop html5 ev.datatransfer.setd value

最近在看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>

技术分享

上图就是一个把上面小图拖放到下面的大方框中释放鼠标就可以删除当前拖放的小图。

html5拖放操作

标签：drag drop html5 ev.datatransfer.setd value

原文地址：http://blog.csdn.net/sunny327/article/details/46419355

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行