HTML5新增的拖放API

TML拖放接口为DragEvent, DataTransfer, DataTransferItem和DataTransferItemList（后两者浏览器支持很差）.说简单点就是关于拖拽的系列事件。其实除非是要用DataTransfer,更建议使用浏览器支持性更好的鼠标点击移动松开相关事件。

拖拽相关的系列事件

当元素节点或选中的文本被拖拉时，就会持续触发拖拉事件，包括以下一些事件。

drag：拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。这类连续触发的事件都涉及一个问题叫做防抖节流（敬请期待）。
dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
drop：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下 ESC 键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

关于上述事件的注意点

一旦某个元素节点的draggable属性设为true，就无法再用鼠标选中该节点内部的文字或子节点了。
拖拉过程只触发以上这些拖拉事件，尽管鼠标在移动，但是鼠标事件不会触发。
将文件从操作系统拖拉进浏览器，不会触发dragstart和dragend事件。
dragenter和dragover事件的监听函数，用来取出拖拉的数据（即允许放下被拖拉的元素）。由于网页的大部分区域不适合作为放下拖拉元素的目标节点，所以这两个事件的默认设置为当前节点不允许接受被拖拉的元素。如果想要在目标节点上放下的数据，首先必须阻止这两个事件的默认行为。
上述一系列事件只需记住触发对象：被拖拽对象、当前对象（拖拽过程中经过的）、目标对象（最终释放区域）；时间（开始拖拽，结束。释放，进入，在上面，离开）。

dataTransfer

关于事件event参数很重要。区别于其他事件，拖拽系列事件有一点特殊就是dataTransfer。他用来读写拖拽需要携带的数据。往往是开始拖拽设置数据，结束时候读取数据。

dataTransfer的属性

DataTransfer.dropEffect属性用来设置放下（drop）被拖拉节点时的效果，会影响到拖拉经过相关区域时鼠标的形状。它可能取下面的值。
copy：复制被拖拉的节点
move：移动被拖拉的节点
link：创建指向被拖拉的节点的链接
none：无法放下被拖拉的节点
DataTransfer.effectAllowed属性设置本次拖拉中允许的效果。它可能取下面的值。
copy：复制被拖拉的节点
move：移动被拖拉的节点
link：创建指向被拖拉节点的链接
copyLink：允许copy或link
copyMove：允许copy或move
linkMove：允许link或move
all：允许所有效果
none：无法放下被拖拉的节点
uninitialized：默认值，等同于all
DataTransfer.files属性是一个 FileList 对象，包含一组本地文件，可以用来在拖拉操作中传送。如果本次拖拉不涉及文件，则该属性为空的 FileList 对象。
DataTransfer.types属性是一个只读的数组，每个成员是一个字符串，里面是拖拉的数据格式（通常是 MIME 值）。比如，如果拖拉的是文字，对应的成员就是text/plain。
DataTransfer.items（支持性不好）属性返回一个类似数组的只读对象（DataTransferItemList 实例），每个成员就是本次拖拉的一个对象（DataTransferItem 实例）。如果本次拖拉不包含对象，则返回一个空对象。
DataTransferItemList 实例具有以下的属性和方法。
length：返回成员的数量
add(data, type)：增加一个指定内容和类型（比如text/html和text/plain）的字符串作为成员
add(file)：add方法的另一种用法，增加一个文件作为成员
remove(index)：移除指定位置的成员
clear()：移除所有的成员
DataTransferItem 实例具有以下的属性和方法。
kind：返回成员的种类（string还是file）。
type：返回成员的类型（通常是 MIME 值）。
getAsFile()：如果被拖拉是文件，返回该文件，否则返回null。
getAsString(callback)：如果被拖拉的是字符串，将该字符传入指定的回调函数处理。该方法是异步的，所以需要传入回调函数。

dataTransfer的方法

DataTransfer.setData(format,data)方法用来设置拖拉事件所带有的数据。
DataTransfer.getData(format)方法接受一个字符串（表示数据类型）作为参数，返回事件所带的指定类型的数据
DataTransfer.clearData()方法接受一个字符串（表示数据类型）作为参数，删除事件所带的指定类型的数据。
DataTransfer.setDragImage()：拖动过程中（dragstart事件触发后），浏览器会显示一张图片跟随鼠标一起移动，表示被拖动的节点。这张图片是自动创造的，通常显示为被拖动节点的外观，不需要自己动手设置。DataTransfer.setDragImage()方法可以自定义这张图片。

何使用HTML5实现拖放单个元素？本篇文章将给大家介绍关于实现拖放HTML元素的JavaScript代码，下面一起来看具体的实现内容。

通过使用HTML5的拖放功能，您可以拖放HTML页面元素

我们来看具体的示例

代码如下

SimpleDragDrop.html

<!DOCTYPE html>

<html>

<head>

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

var zone=document.querySelector('.dropzone');

zone.addEventListener('dragover', onDragOver, false);

zone.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('text', this.id);

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

</script>

</head>

</div>

</body>

</html>

SimpleDragDrop.css

.box {

width:32px;

height:32px;

border:solid 1px #002f9f;

}

.dropzone {

margin-top:16px;

margin-bottom:16px;

width: 280px;

height: 64px;

border: solid 1px #808080;

}

说明：

页面上显示两个上述的div，可以使用class=“box”，id=“dropzone”拖动的对象是放置接受区域的div。对于可拖动对象，可以将draggable=“true”设置为可拖动对象。

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

var zone=document.querySelector('.dropzone');

zone.addEventListener('dragover', onDragOver, false);

zone.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('text', this.id);

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

上面的代码为每个元素分配拖放事件。

对于要拖动的元素，我们设置“dragstart”事件。启动拖动时，将执行onDragStart函数。

对于要删除的元素，设置“dragover”“drop”事件。当拖动的元素进入拖放区域，onDragOver功能被执行，当元件被丢弃onDrop功能将被执行。

在dragstart的情况下，你必须编写代码来设置dataTransfer对象的值。它不使用插入dataTransfer中的值，但是如果没有这个代码的话，在没有数据的情况下也会实现。

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

拖动顶部的方框。如果将其拖动到底部框架，框架中将显示“onDragOver”。

将其放在框架中时，框架中会显示“onDrop”字符。

示例2：添加了事件的拖放元素的方法

代码如下

SimpleDragDrop2.html

<!DOCTYPE html>

<html>

<head>

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

box.addEventListener('dragend', onDragEnd, false);

var box=document.querySelector('.dropzone');

box.addEventListener('dragenter', onDragEnter, false);

box.addEventListener('dragover', onDragOver, false);

box.addEventListener('dragleave', onDragLeave, false);

box.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('Text', this.id);

this.textContent='onDragStart';

}

function onDragEnd(e) {

this.textContent='onDragEnd';

}

function onDragEnter(e) {

this.textContent='onDragEnter';

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDragLeave(e) {

this.textContent='onDragLeave';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

</script>

</head>

</body>

</html>

SimpleDragDrop.css

.box {

width:32px;

height:32px;

border:solid 1px #d01313;

}

.dropzone {

margin-top:16px;

margin-bottom:16px;

width: 280px;

height: 64px;

border: solid 1px #808080;

}

说明：

如上例所示，页面上显示两页DIV。对于可拖动对象，请将draggable=“true”设置为可拖动对象。

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

box.addEventListener('dragend', onDragEnd, false);

var box=document.querySelector('.dropzone');

box.addEventListener('dragenter', onDragEnter, false);

box.addEventListener('dragover', onDragOver, false);

box.addEventListener('dragleave', onDragLeave, false);

box.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('Text', this.id);

this.textContent='onDragStart';

}

function onDragEnd(e) {

this.textContent='onDragEnd';

}

function onDragEnter(e) {

this.textContent='onDragEnter';

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDragLeave(e) {

this.textContent='onDragLeave';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

上面的代码为每个元素分配拖放事件。

“dragstart”和“dragend”事件被分配给拖动侧的元素。一旦开始拖动，调用ondstart函数，拖动结束后，将被调用ondos agEs函数。

“dragenter”，“dragover”，“dragleave”和“drop”事件被分配给要拖动的元素。当拖动的元素进入拖放区域，执行onDragEnter函数的功能，在拖拽区域内拖动的状态下执行onDragOver函数，从拖拽的区域出来的话，将执行OnDragLeave函数。下拉拖动的元素时，将执行onDrop函数。

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

拖动红色区域的方形区域。字符“onDragStart”显示在该区域中。

当你松开拖动时，你会看到“onDragEnd”的角色红框中的区域。

再次拖动红框区域。当拖放到底部区域时，在放置区域中显示字符“onDragOver”。

当你放开拖到拖放区域红框的区域，你会看到“onDrop”的字符在底部区域中。

再次拖动红框以与放置区域重叠。将显示“onDragOver”字符。

拖动红框并将其拖动到拖放区域之外。放置区域中的字符显示变为“onDragLeave”。

以上就是如何使用HTML5实现拖放单个元素的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

文简介

点赞 + 关注 + 收藏=学会了

在线咨询

上一篇：关于京喜+直播入驻、1分钟教会你掌握全局
下一篇：音乐梦想家简谱、五线谱、吉他、四线谱键盘高速输入技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5新增的拖放API

文简介

您的项目需求