1、给标签添加属性draggable=ture即可允许拖放，有些标签可以不加，例如img有图片、a有url，默认拥有拖放功能
2、事件在被拖动元素上触发
- ondragstart
- ondrag
- ondragend
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>
解释在代码中，拖动事件
</title>
<style>
.dragFrame{
width:200px;
height:200px;
background-color:black;
}
</style>
</head>
<body> <div class="dragFrame" draggable="true"></div>
<script>
//ondragstart 元素被拖动，事件触发
document.addEventListener("dragstart",function(e){
if(e.target.className=="dragFrame"){
e.target.style.opacity=.4;
}
});
//ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
document.addEventListener("drag",function(){
console.log("音乐：要我看多少遍 你停下来就说明你放了手");
});
//ondragend 容易看出元素结束拖动，事件触发
document.addEventListener("dragend",function(e){
if(e.target.className=="dragFrame"){
e.target.style=1;
}
});
</script>
</body>
</html>
3、被拖动元素进入目标元素
- ondragenter
- ondragover
- ondragleave
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>
解释在代码中，拖动事件
</title>
<style>
.dragFrame{
width:200px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body> <div class="dragFrame"><p id="moveFrame" draggable="true">我想走了</p></div>
<div class="dragFrame"></div>
<script>
//ondragstart 元素被拖动，事件触发
document.addEventListener("dragstart",function(e){
if(e.target.className=="dragFrame"){
e.target.style.opacity=.4;
}
});
//ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
document.addEventListener("drag",function(){
console.log("音乐：要我看多少遍 你停下来就说明你放了手");
});
//ondragend 容易看出元素结束拖动，事件触发
document.addEventListener("dragend",function(e){
if(e.target.className=="dragFrame"){
e.target.style=1;
}
}); //ondragenter 被拖动元素一旦进入目标元素，事件触发
document.addEventListener("dragenter",function(e){
e.target.style.outline="3px dotted red";
});
//ondragover 被拖动元素在目标元素上随时拖放，事件不断触发
document.addEventListener("dragover",function(){
console.log("音乐：你来看我了 我疯狂的激动");
});
//ondragleave 被拖动元素离开了目标元素上面，事件触发
document.addEventListener("dragleave",function(e){
e.target.style.outline="";
});
</script>
</body>
</html>
4、drop 拖动中，释放鼠标键，事件触发（注意，在ondragover事件里要添加preventDefault的方法阻止默认行为，drop事件就可以看见效果）
没有阻止默认行为的效果是：
drop就毫无反应，跟没加过的一样
阻止了默认行为后
drop就有了效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>
解释在代码中，拖动事件
</title>
<style>
.dragFrame{
width:200px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body> <div class="dragFrame"><p id="moveFrame" draggable="true">我想走了</p></div>
<div class="dragFrame"></div>
<script>
//ondragstart 元素被拖动，事件触发
document.addEventListener("dragstart",function(e){
if(e.target.className=="dragFrame"){
e.target.style.opacity=.4;
}
});
//ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
document.addEventListener("drag",function(){
console.log("音乐：要我看多少遍 你停下来就说明你放了手");
});
//ondragend 容易看出元素结束拖动，事件触发
document.addEventListener("dragend",function(e){
if(e.target.className=="dragFrame"){
e.target.style=1;
}
}); //ondragenter 被拖动元素一旦进入目标元素，事件触发
document.addEventListener("dragenter",function(e){
e.target.style.outline="3px dotted red";
});
//ondragover 被拖动元素在目标元素上随时拖放，事件不断触发
document.addEventListener("dragover",function(e){
e.preventDefault();
console.log("音乐：你来看我了 我疯狂的激动");
});
//ondragleave 被拖动元素离开了目标元素上面，事件触发
document.addEventListener("dragleave",function(e){
e.target.style.outline="";
});
document.addEventListener("drop",function(e){
e.preventDefault();
alert("drop有效果了");
})
</script>
</body>
</html>
5、兼容性
