HTML5拖放操作
2017-03-10 本文已影响0人
呆猫极客
拖放（Drag 和 Drop）是 HTML5 标准的组成部分。拖放顾名思义就是把一个对象抓取放到另一个位置。在HTML5中，任何元素都支持拖放。
-
浏览器支持情况
firefox，opera12，Chrome， Safari5，Microsof Edge，IE9（IE6~8是有拖放的api的，但是没有dataTrasfer对象）。
-
开启draggable属性
要想拖动网页中的一个元素，我们必须给这个元素设置draggable的属性为true。
<div draggable="true"></div>
大部分浏览器的图片和链接是默认可以拖动的。
-
拖动过程中触发的事件
在拖动的过程中会触发一系列事件。
drag ------ 被拖动元素在拖动的过程中会持续触发，给拖动元素设置该事件。
dragstart ------ 被拖动元素在拖动开始时会触发，给拖动元素设置该事件。
dragend ------ 被拖动元素在拖动结束时会触发，给拖动元素设置该事件。
dragenter ------ 进入目标区域时会触发，给目标区域设置该事件。
dragleave ------ 离开目标区域时会触发，给目标区域设置该事件。
dragover ------ 进入目标区域时会持续触发，给目标区域设置该事件。
drop ------ 结束拖放，也就是松开鼠标时触发，目标区域或者拖动元素都可设置。
-
简单的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box{
height:140px;
width:140px;
border:1px solid black;
padding:25px;
margin-bottom:20px;
}
.move{
height:120px;
width:120px;
border:1px solid green;
background:green;
}
</style>
<script>
function moveover(e){//拖动事件以参数形式传进函数内部
e.preventDefault();//去除浏览器默认效果
}
function drop(e){
e.preventDefault();
var data=e.dataTransfer.getData("Text");//取到数据
e.target.appendChild(document.getElementsByClassName(data)[0]);
}
function movestart(e){
e.dataTransfer.setData("Text",e.target.className);//
在dataTrasfer对象上存储数据
}
</script>
</head>
<body>
//绑定事件形式的拖放操作
<div class="box" ondragover="moveover(event)" ondrop="drop(event)"></div>
<div class="move" draggable="true" ondragstart="movestart(event)"></div>
</body>
</html>
图.jpg
-
dataTransfer对象
拖动事件有一个dataTransfer属性，它本身指向一个对象，包含了与拖动相关的各种信息。
// dataTransfer的属性
dropEffect ------ 拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed ------ 指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files ------ 包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types ------ 储存在DataTransfer对象的数据的类型。
// dataTransfer的方法
setData(format, data) ------ 在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format) ------ 从dataTransfer对象取出数据。
clearData(format) ------ 清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y) ------ 指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。
dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。
-
实例：拖动页面元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divBox{
width:200px;
border:1px dotted black;
margin:20px;
padding:10px;
}
.divBox .move{
height:40px;
width:150px;
border:1px solid green;
background:green;
margin:0px auto;
}
</style>
</head>
<body>
<div class="divBox">
<div class="move" draggable="true" ></div>
</div>
<div class="divBox"></div>
<div class="divBox"></div>
<div class="divBox"></div>
<script>
var moveBox = document.querySelector(".move");//选取第一个class为move的节点
var boxs = document.querySelectorAll(".divBox");//选取所有class为divBox的节点
moveBox.addEventListener("dragstart",function(e){//绑定一个监听事件，当dragstart事件发生时，调用回调函数
e.dataTransfer.setData("text",e.target.className);//类名
});
moveBox.addEventListener("dragend",function(e){
});
for(var i = 0;i < boxs.length;i++){//给每个div绑定事件
boxs[i].addEventListener('dragover', function(e) {
e.preventDefault();//避免浏览器的默认值
e.dataTransfer.dropEffect = 'move';
this.style.border = '1px solid red';
this.style.height = '42px';
return false;
});
boxs[i].addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
this.style.border = '1px dotted black';
this.style.height = '';
var data = e.dataTransfer.getData('text');//取得数据
this.appendChild(document.getElementsByClassName(data)[0]);//把拖动元素放到目标div中
});
boxs[i].addEventListener('dragenter', function(e) {
e.preventDefault();
});
boxs[i].addEventListener('dragleave', function(e) {
e.preventDefault();
this.style.border = '1px dotted black';
this.style.height = '';
});
}
</script>
</body>
</html>
图2.jpg
-
拖放的其他用途
拖放操作给交互本来就很少的html增加了很多乐趣，通过H5的拖放操作，我们还可以进行板块的复制，交换等，本人技术能力有限，等研究明白了一定补上。
-
资料与文献
此文资料部分参考自:
草根程序员
W3C
如想更深入了解H5的拖放，请参考以上文献。
作者：jingks
此为原创文章，请勿用在商业用途，转载请标明作者。
