H5的原生拖拽,拖放事件(drag and drop)
2016-12-06 本文已影响0人
Sccong
通过
draggable=true设置是否可以被拖动（ie这个老表不支持）
- dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
- ragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
- dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
-dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果. - drag:拖拽期间在被拖拽元素上连续触发
- drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
- dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Scc</title>
<style>
div{
width:600px;
height:600px;
border:1px solid black;
padding-top:20px;
padding-left:20px;
}
#d1{
float:left;
}
#d2{
float:right;
}
</style>
</head>
<body>
<div id="d1">
<img id="img" src="Koala.jpg">
</div>
<div id="d2"></div>
</body>
<script>
var d2=document.getElementById("d2");
var img=document.getElementById("img");
img.ondragstart=function(event){
var data=this.src;
event.dataTransfer.setData("text",data);
}
d2.ondragover=function(event){
event.preventDefault();
}
d2.ondrop=function(event){
var src=event.dataTransfer.getData("text");
var i=document.createElement("img");
i.src=src;
d2.appendChild(i);
document.getElementById("d1").removeChild(img);
}
</script>
</html>
注意：dataTransfer是全局共享的，可以通过getData()和setData()设置、获取数据
