- dragstart 开始拖放操作
- drag 拖放过程中
- dragenter 被拖放的元素进入本元素内
- dragover 被拖放的元素在本元素中移动
- dragleave 被拖放的元素离开本元素的范围
- drop 有其他元素被拖放到本元素中
- dragend 拖放操作结束
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放示例</title>
<script>
function init(){
var source = document.getElementById("dragme"),
dest = document.getElementById("text");
//1拖放开始
source.addEventListener("dragstart",function(e){
//console.log(e)
//向dataTransfer对象追加数据；
var dt = e.dataTransfer;
dt.effectAllowed = "move";
//2拖动元素为dt.setData("text/plain",this.id);
dt.setData("text/plain",this.id);
},false);
//3拖放结束：dragend
dest.addEventListener("dragend",function(e){
//不执行默认处理（拒绝被拖放）
e.preventDefault();
//console.log(e)
},false);
//4 被拖放 drop
dest.addEventListener("drop",function(e){
//从DataTransfet对象那里取得数据
var dt = e.dataTransfer;
var text = dt.getData("text/plain");
dest.appendChild(document.getElementById(text));
//5 不执行默认处理（拒绝被拖放）
e.preventDefault();
//停止事件传播
e.stopPropagation();
},false);
}
//设置页面属性，不执行默认处理（拒绝被拖放）
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body onload="init()">
<h1>简单拖放示例</h1>
<div id="dragme" draggable="true" style="width: 200px; line-height: 40px; text-align: center; background: yellow;">请拖放</div>
<div id="text" style="width: 200px; height: 200px; border: 1px solid #ddd;"></div>
</body>
</html>
感兴趣的朋友，关注下微信公众号：“学易资源共享平台”
扫码二维码关注，更多知识分享在这里，谢谢关注！
