Html5 拖拽
概念
- 拖拽:通过鼠标操作,将源(img div 一段文本) 对象拖拽至目标对象。
- 源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等等。
- 目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入这个区域,可以在这个区域上方悬停(未松手),可以释松手释放将源对象放置此处(已松手),也可以悬停后离开该区域。
拖拽技术实现
- 原生DOM
- 使用jQuery插件(其它第三方插件)
- HTML5 中提供的拖拽功能
- draggable 允许/禁用 拖拽功能。
拖拽触发事件
- 源对象事件
- dragstart - 当鼠标开始拖放时被触发
- drag - 当鼠标拖放过程中,类似于mousemove
- dragend - 当鼠标拖放结束时触发
- 目标对象事件
- dragenter - 源对象拖动着进入目标对象时
- dragover - 源对象停留在目标对象上方时
- dragleave - 源对象拖动着离开目标对象时
- drop - 源对象拖动着在目标对象上方释放/松开鼠标
- 源对象事件
拖动源对象事件 和 目标对象事件中传递数据
- 拖动事件新属性 e.dataTransfer
- 功能:用于在源对象和目标对象的事件间传递数据。
- 数据保存
- e.dataTransfer.setData( k , v ) //k, v 必须都是string类型
- 数据读取
- e.dataTransfer.getData( k )
- 拖动事件新属性 e.dataTransfer
拖拽案例
- 随鼠标拖动的飞机
- clientX,clientY 相对于浏览器的偏移值
- screenX,screenY 相对于显示器的偏移值
- offsetX,offsetY 相对于源对象的偏移值
- 随鼠标拖动的飞机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动的飞机</title>
<style>
body{
position:relative;
}
#imgPlane{
position:absolute;
}
</style>
</head>
<body>
<h1>拖动的飞机</h1>
<hr>
<img id="imgPlane" src="img/p3.png" draggable="true">
<script>
var plane = document.getElementById("imgPlane");
var offsetX,offsetY;
plane.addEventListener("dragstart",function(e){
offsetX = e.offsetX; //获取鼠标偏移值
offsetY = e.offsetY; //获取鼠标偏移值
console.log("开始拖拽",e);
});
plane.addEventListener("drag",function(e){
var x = e.clientX; //获取鼠标当前坐标
var y = e.clientY; //获取鼠标当前坐标
if( x==0 && y==0 ){ //鼠标松开之前最后一次drag事件无法获取坐标,所以要进行判断。
return;
}
x -= offsetX; //调整偏移值
y -= offsetY; //调整偏移值
plane.style.left = x + "px"; //设置最终坐标
plane.style.top = y + "px"; //设置最终坐标
console.log("飞机拖拽中....",e);
});
plane.addEventListener("dragend",function(e){
console.log("结束拖拽",e)
});
</script>
</body>
</html>
2. 将飞机拖入回收站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
text-align:center;
}
#dustbin{
opacity:.3;
}
</style>
</head>
<body>
<h1>拖动飞机至回收站</h1>
<hr>
<img id="dustbin" src="img/dustbin.png">
<hr>
<img id="p1" class="plane" src="img/p3.png">
<img id="p2" class="plane" src="img/p4.png">
<img id="p3" class="plane" src="img/p5.png">
<script>
var planes = document.getElementsByClassName("plane");
for(var i=0; i<planes.length; i++){
planes[i].addEventListener("dragstart",function(e){ //绑定事件
e.dataTransfer.setData("PlaneID",this.id); //保存当前操作对象id
})
}
var dustbin = document.getElementById("dustbin");
dustbin.addEventListener("dragenter",function(e){
console.log("拖动进入");
dustbin.style.opacity = 1; //设置垃圾箱透明度效果
});
dustbin.addEventListener("dragover",function(e){
console.log("拖动至目标内");
e.preventDefault(); //阻止默认操作,实现可拖拽
});
dustbin.addEventListener("drop",function(e){
console.log("松开拖动");
dustbin.style.opacity = .3;
var planeId = e.dataTransfer.getData("PlaneID"); //获取当前拖拽对象
var p = document.getElementById(planeId);
p.parentNode.removeChild(p); //从DOM树移除对象
});
dustbin.addEventListener("dragleave",function(e){
console.log("拖动离开");
dustbin.style.opacity = .3;
});
</script>
</body>
</html>
- 补充:将客户端本地文件拖入浏览器中