您的位置：首页 > Web前端 > HTML5

Html5 拖拽

2017-03-26 10:38 85 查看

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 )

拖拽案例

随鼠标拖动的飞机

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",<
4000
span class="hljs-keyword">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>

补充：将客户端本地文件拖入浏览器中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 拖拽

相关文章推荐

新的分享

章节导航