HTML5 drag & drop 拖拽与拖放简介

2021-10-18 20:53:12

DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
```
<div title="拖拽我" draggable="true">列表1</div>
```
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。

---------------------------------------------------

dragstart

Drag event starts.

drag

During the drag operation.

dragenter

Drag is over the target; used to determine if target will accept drop.

dragover

Drag is over target; used to determine feedback to user.

drop
Drop occurs.

dragleave
Drag leaves target.

dragend
Drag operation ends.

拖放事件

通过拖放事件，可以控制拖放相关的各个方面。其中最关键的地方在于确定那里发生了拖放事件，有些事件是在被拖动的元素上触发的，而有些事件是在放置目标上触发的。拖动某些元素时，将一次触发下列事件：

dragstart
drag
dragend

按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。此时光标变成“不能放”符号（圆环中有一条反斜线），表示不能把元素放到自己上面。拖动开始时，可以通过ondragstart事件处理程序来运行JavaScript代码。

触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续发送该事件。这个事件与mousemove事件相似，在鼠标移动过程中，mousemove事件也会持续发生。当拖动停止时（无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上），会触发dragend事件。

上述三个事件的目标都是被拖动的元素。默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终跟随着光标移动。

当元素被拖放到一个有效的放置目标上时，下列事件会依次发生：

dragenter
dragover
dragleave或drop

只要元素被拖动到放置目标上，就会触发dragenter事件（类似于mouseover事件）。紧随其后的是dragover事件，而且被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。如果元素被拖出了放置目标，dragover事件不再发生，但会触发dragleave事件（类似于mouseout事件）。如果元素被放到了放置目标中，则会触发drop事件而不是dragleave事件。上述三个事件的目标都是作为放置目标的元素。

dataTransfer对象

只有简单的拖放而没有数据变化是没有什么用的。为了在拖放操作时实现数据交换，IE 5引入了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法来完善拖放功能。目前，HTML5规范草案也收入了dataTransfer对象。

dataTransfer对象有两个主要方法： getData()和setData()。不难想象，getData()可以取得由setData()保存的值。setData()方法的第一个参数，也是getDAta()方法唯一的一个参数，是一个字符串，表示保存的数据类型，取值为”text”或“URL”，如下所示：

//设置和接收文本数据

event.dataTransfer.setDAta("text", "some text");

var text = event.dataTransfer.getData("text");

//设置和接收URL

event.dataTransfer.setData("URL", "HTML://www.w3cmm.com/");

实例：

<!DOCTYPE html>
<html>
<head>

//拖拽物体的事件
two.ondragstart=function (e) {
e.dataTransfer.setData("Text","后盾网");
one.innerHTML="开始";
}
two.ondrag=function () {
// one.innerHTML+="移动";
}
two.ondragend=function () {
one.innerHTML+="完成";
}

//投放区的事件
one.ondragenter=function (e) {
one.innerHTML+="进入";
e.preventDefault();
}

one.ondragover=function (e) {
//one.innerHTML+="移动";
e.preventDefault();
}
one.ondragleave=function (e) {
one.innerHTML+="离开";
e.preventDefault();
}
one.ondrop=function (e) {
e.preventDefault();
alert(e.dataTransfer.getData("Text"))
one.appendChild(two);
}
}
</script>
</head>

码农公寓

拖放事件

dataTransfer对象

相关文章