html5 drag 拖拽 功能,HTML5丨拖放（Drag & Drop）

一、拖放

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

二、浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

三、属性介绍

0、代码示例

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("Text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

1、draggable

设置元素为可拖放。

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

2、ondragstart

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev) {

ev.dataTransfer.setData("Text",ev.target.id);

}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

3、ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用ondragover 事件的 event.preventDefault() 方法：

function allowDrop(ev) {

ev.preventDefault();

}

4、ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目标元素)中

四、属性生命周期

重点，记一下：

生命周期

属性

描述

拖动开始

ondragstart

在拖动操作开始时执行脚本(对象是被拖拽元素)

拖动过程中

ondrag

只要脚本在被拖动就允许脚本(对象是被拖拽元素)

拖动过程中

ondragenter

当元素被拖动到一个合法的放置目标时，执行脚本(对象是目标元素)

拖动过程中

ondragover

只要元素正在合法的放置目标上拖动时，就执行脚本(对象是目标元素)

拖动过程中

ondragleave

当元素离开合法的放置目标时(对象是目标元素)

拖动结束

ondrop

将被拖拽元素放在目标元素内时运行脚本(对象是目标元素)

拖动结束

ondragend

在拖动操作结束时运行脚本(对象是被拖拽元素)

被拖拽的元素，执行相关的属性方法：

id="dragId"

draggable="true" // 设置元素可拖动

οndragstart="handleDragStart(this, event)" // 拖动开始时

οndrag="handleDrag(this, event)" // 开始拖动

οndragend="handleDragEnd(this, event)"> // 拖动结束时

目标元素，执行相关的属性方法：

id="targetId"

οndragenter="handleDragEnter(this, event)" // 当元素被拖动到一个合法的放置目标时

οndragοver="handleDragOver(this,event)" // 只要元素正在合法的放置目标上拖动时

οndragleave="handleDragLeave(this, event)" // 当元素离开合法的放置目标时

οndrοp="handleDrop(this, event)"> // 将被拖拽元素放在目标元素内时

五、dataTransfer

1、成员列表

属性

描述

dropEffect

设置或获取拖拽操作的类型和要显示的光标类型。

effectAllowed

设置或获取数据传送操作可应用于该对象的源元素。

方法

描述

clearData

通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。

getData

通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。

setData

以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。

2、解析

dataTransfer 对象使得自定义处理拖拽操作成为可能。你可通过 event 对象完成这种功能。

dataTransfer 对象可于源对象和目标对象中使用。

典型用法是，setData 方法用于源事件，以便提供关于将要进行传送的数据的数据。

相应的，getData 方法用于目标事件以便确保获取的数据和数据格式。

参考资料

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

https://www.jb51.net/shouce/dhtml/objects/obj_datatransfer.html

--

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

https://www.cnblogs.com/ijjyo/p/4300717.html

https://blog.csdn.net/qq_37111953/article/details/78278048