Drag And Drop

Table of Contents

简介

拖放 是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

*注:Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

示例1

1: <div id="drop-box"
2:      ondrop="drop(event)"
3:      ondragover="allowDrop(event)">
4: </div>
5: <img id="drag-ele" src="./images/drap.png"
6:      draggable="true"
7:      ondragstart="drag(event)"
8:      width="200" height="160"
9: />
 1: function allowDrop(e) {
 2:     e.preventDefault()
 3: }
 4: 
 5: function drag(e) {
 6:     e.dataTransfer.setData('Text', e.target.id)
 7: }
 8: 
 9: function drop(e) {
10:     e.preventDefault()
11: 
12:     var data = e.dataTransfer.getData('Text');
13:     e.target.appendChild(document.getElementById(data))
14: }

它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。

拖放

为了方便后文描述,我们称被拖元素为“小拖”,放置到的目标元素为“小盒” : )

1. 设置元素为可拖放

首先,为了使元素可拖动,需要把“小拖”的 draggable 属性设置为 true ,如下:

1: <img draggable="true" / >

2. 设置拖动的触发事件

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

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

如何设置这些数据呢? dataTransfer.setData() ,我们用它来设置被拖数据的数据类型和值,如下:

1: function drag(e) {
2:     e.dataTransfer.setData('Text', e.target.id)
3: }

其中, Text 是一个 DOMString ,表示要添加到“小拖”中的拖动数据的类型,值是“小拖”的 id 。

IE 浏览器中 e.originalEvent.dataTransfer.setData 可能会产生以下报错:

  • 意外地调用了方法或属性访问;
  • 参数无效。

为什么?如何解决呢?原来 setData(key, value)key 在 IE 中只能设置为 Texttext 等指定的可选类型(Chrome 中无此限制), value 最好使用 JSON.stringfy() 序列化一下。

IE 不死,天下不安。

3. 设置“小盒”可被放置

ondragover 事件规定在何处放置“小拖”的数据。

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

1: event.preventDefault()

4. 进行放置

当放置“小拖”时,会发生 drop 事件。在上面的例子中, ondrop 属性调用了一个函数 drop(event) ,如下:

 1: function drop(e) {
 2:     // 调用 `preventDefault()` 来避免浏览器对数据的默认处理
 3:     // `drop` 事件的默认行为是以链接形式打开
 4:     e.preventDefault()
 5: 
 6:     // 通过 `dataTransfer.getData('Text')` 方法获得“小拖”设置的数据
 7:     // 该方法将返回在 `setData()` 方法中设置的相同类型的任何数据
 8:     var data = e.dataTransfer.getData('Text')
 9:     // 这里 `data` 就是前面设置的 `e.target.id`
10:     e.target.appendChild(document.getElementById(data))
11: }

Footnotes:

Date: 2020-11-10 Tue 14:27

Author: Jack Liu

Created: 2020-11-10 Tue 15:20

Validate