H5拖放API使用及小案例实现
H5拖放API
HTML5定义的拖放指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件，在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置，并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素，到保持鼠标左键按下并移动该元素的整个过程称为“拖”;将被动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
主流浏览器支持情况如下：
| IE9+ | Firefox3.5 | Opera11.5 | Chrome4.0 | Safari4+ |
|---|---|---|---|---|
| √ | √ | √ | √ | 5.21不支持 |
拖放属性
| 事件名称 | 触发事件的元素 | 说明 |
|---|---|---|
| dragstart | 该事件由被拖拽的元素触发。 | 当用户刚开始拖动元素时触发该事件。 |
| drag | 该事件由被拖拽的元素触发。 | 当元素处于被拖动状态时触发该事件。 |
| dragenter | 该事件由被拖拽的元素触发。 | 当被拖动的元素进入到可以被放置下来的有效区域的瞬间触发该事件。 |
| dragend | dragend | 拖放操作结束 |
| dragover | 该事件由目标区域元素触发。 | 当被拖动的元素处于可以被放置下来的有效区域内时，该事件会不停地被触发。该事件状态在dragenter之后，在dragleave之前。 |
| dragleave | 该事件由被拖拽的元素触发。 | 当被拖动的元素离开了可以被放置下来的有效区域的瞬间触发该事件。 |
| drop | 该事件由目标区域元素触发。 | 当被拖动的元素被放置在有效的区域时触发该事件。 |
拖放生命周期触发事件的顺序
- dragstart
- drag
- dragenter
- dragover
- dragleave
- drop
- dragend
拖动事件尝试
<!--
draggable 属性 是设置元素为可拖动的
true : 可以拖动
false：不可拖动
-->
<div id="box" draggable="true"></div>
<script type="text/javascript">
// 获取源对象
var box=document.querySelector('#box');
// 拖拽开始时触发，只会触发一次
box.ondragstart=function(){
console.log('拖拽开始');
box.style.background="#336699";
}
// 拖拽触发的事件，连续触发，只要鼠标不松开就会一直触发
box.ondrag=function(){
console.log('拖动的过程中');
box.style.background="#336699";
box.style.opacity='0.2';
}
// 拖动结束时，触发该事件，只要鼠标一松开就触发
box.ondragend=function(){ //
console.log('拖动结束时');
box.style.background="orange";
box.style.opacity='1';
}
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
释放事件尝试
<div id="box" draggable="true"></div>
<div id="trash">
目标对象
</div>
<script type="text/javascript">
// 获取源对象
var box =document.getElementById('box');
// 开拖动时
box.ondragstart=function(e){
// 记录开始拖动时的，鼠标在div盒子上的偏移量
offsetX=e.offsetX;
offsetY=e.offsetY;
}
box.ondrag=function(e){
var x =e.pageX;
var y= e.pageY;
// console.log(x,y);
if(x==0 && y==0)return;//不处理拖动最后一刻x和y都为0情形
y-=offsetY;
x-=offsetX;
box.style.left=x+'px';
box.style.top=y+'px';
}
// 为目标对象添加事件监听 --- 删除拖动的源对象
var trash =document.getElementById('trash');
trash.ondragenter=function(){
console.log('源对象进入到了目标对象');
// trash.style.background='orange';
}
/*
ondragover 和 ondragleave 事件 的默认行为是拒绝任何被拖放的元素.
因此必须阻止这种默认行为，不然ondrop会失效
*/
trash.ondragover=function(e){
console.log('源对象进入目标对象');
// e.preventDefault();
return false;
}
trash.ondragleave=function(e){
console.log('源对象离开目标对象');
e.preventDefault();
}
// 在目标对象中释放了源对象
trash.ondrop=function(e){
console.log('释放了');
// 从父元素中删除子节点
box.parentNode.removeChild(box);
}
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
width: 200px;
height: 200px;
background-color: orange;
/* 元素绝对定位，修改top、lef值 */
position: absolute;
}
#trash{
width: 400px;
height: 400px;
border: 2px solid #FF1493;
margin-left: 250px;
}
</style>
datatransfer 对象
HTML5拖放API允许在拖放过程中携带一项或多项自定义数据内容。这些数据内容可以使用拖放事件DragEvent中的datatransfer属性进行添加和处理，该属性来源于HTML5中的DataTransfer对象，其中包含的每项数据均可有独立的数据类型。
DataTransfer对象的常用属性：
| 属性名称 | 说明 |
|---|---|
| dropEffect | 用于获取或重置当前的拖放类型，共有4种取值。 |
| effectAllowed | 提供所有允许的拖放类型。 |
| types | 该属性返回值为字符串数组，包含了所有存入数据的类型。 |
| items | 该属性返回值为DataTransferItemList对象。 |
| files | 如果拖放的是一个或多个本地文件，该属性返回值为文件列表对象。 |
datatransfer 方法
| 方法名称 | 说明 |
|---|---|
| getData(format) | 从dataTransfer对象取出数据 |
| setData(format,data) | 在dragstart事件调用此函数，在dataTransfer对象中存储此对象 |
| clearData() | 清除DataTransfer对象中数据。如果省略参数则表示清除全部数据 |
| addElement（element） | 提供一个页面元素作为参考，同时使用参数作为拖放反馈图像 |
| setDragImage(image,x,y) | 设置拖拽元素时所显示的自定义图标。其中image为图片对象，x和y分别指的是图标与鼠标在水平和垂直方向上的距离。 |
案例实现（实现图片拖动，记得自己添加图片）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.add_border{
float: left;
border: 3px #ccc dashed;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 300px;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--
1.通过拖放将照片从左侧“相册”区域拖拽到右侧“垃圾箱”区域；
2.拖拽过程中，“温馨提示”部分要及时提醒，当前正在进行拖放操作；
-->
<div id="info"><h2>温馨提示：可以将照片直接拖入到垃圾箱中</h2></div>
<!-- 拖拽元素(源对象) -->
<div id="album" class="add_border">
<h2>相册</h2>
<img src="img/图片1.jpg" draggable="true" id="img1">
<img src="img/图片2.jpg" draggable="true" id="img2">
<img src="img/图片3.jpg" draggable="true" id="img3">
</div>
<!-- <img src="img/1.png" id="test"> -->
<!-- 目标对象 -->
<div id="trash" class="add_border"><h2>垃圾箱</h2></div>
<script type="text/javascript">
// 获取源对象 和 目标对象
var album =document.getElementById('album');
var tarsh =document.getElementById('trash');
var info =document.getElementById('info');
// 开始拖放操作
album.ondragstart=function(e){
// 得到被拖放的照片（img）id
var dragImgId = e.target.id;
// 得到被拖动元素
var dragImg = document.getElementById(dragImgId);
// 拖拽结束
dragImg.ondragend=function(){
info.innerHTML='<h2>温馨提示：可以将照片直接拖入到垃圾箱中</h2>'
}
// 存放被拖拽的元素
e.dataTransfer.setData('dragImgId',dragImgId)
}
// 拖拽的过程
album.ondrag=function(){
info.innerHTML='<h2>照片正在被拖动</h2>'
}
// 关闭默认处理
tarsh.ondragenter=function(){return false}
tarsh.ondragover=function(){return false}
// 源对象进入到目标元素并且释放时
tarsh.ondrop=function(e){
var dragImgId= e.dataTransfer.getData('dragImgId');
// 得到被拖动元素
var dragImg = document.getElementById(dragImgId);
// console.log(dragImg);
// 从相册div中删除该照片的节点
dragImg.parentNode.removeChild(dragImg);
// 将被拖动的照片dom节点添加到垃圾箱中的div中
tarsh.appendChild(dragImg);
info.innerHTML='<h2>温馨提示：可以将照片直接拖入到垃圾箱中</h2>'
}
// var test= document.getElementById('test');
// console.log(test);
// test.remove();
</script>
</body>
</html>
案例实现（拖拽文件显示文件信息）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#section{
height: 300px;
width: 50%;
margin-top: 30px;
border: 2px #FFA500 solid;
}
</style>
</head>
<body>
<!-- 从浏览器外面吧文件拖动到投放区域，并显示文件的信息 -->
<div id="section">
将文件拖放到此区域释放
</div>
<table border="1" id="msg">
<tr>
<th>名称</th>
<th>文件大小</th>
<th>文件类型</th>
</tr>
</table>
<script type="text/javascript">
// 得到目标对象（文件存放区域）
var sec =document.querySelector('#section');
// 信息存放区
var msg =document.querySelector('#msg');
// 关闭默认事件
sec.ondragover=function(e){
e.preventDefault();
}
sec.ondrop=function(e){
e.preventDefault();
// types 拖拽的类型
// console.log(e.dataTransfer.types);//files
// 拖拽元素进入投放区并且显示文件样式
// console.log(e.dataTransfer.files[0])
for(var i=0;i<e.dataTransfer.files.length;i++){
var file = e.dataTransfer.files[i];
// 想要知道file属性中有什么字段，可以直接打印
console.log(file)
var html = "<tr><td>"+file.name+
"<td>"+file.size+"</td>"+
"<td>"+file.type+"</td>"+
"</td></tr>";
msg.innerHTML+=html;
}
}
</script>
</body>
</html>
制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！
扫一扫
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
