语言►HTML►HTML 5.1

拖拽数据

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/02/02/%E6%8B%96%E6%8B%BD%E6%95%B0%E6%8D%AE/

摘要

本文主要讲述了：

  1. 读取指定类型的拖拽数据
  2. 写入指定类型的拖拽数据

正文

读取指定类型的拖拽数据

拖拽事件使用DataTransfer实例为载体储存并传递数据

DataTransfer.prototype.types

DataTransfer.prototype.types是一个数组，它包含了DataTransfer实例中储存的所有数据的类型。

当drop事件发生时，开发者可以通过DataTransfer.prototype.types获取所有数据类型，继而通过DataTransfer.prototype.getData()读取指定类型的数据

注意：若拖拽操作不包含数据（例如：拖拽文件，此时type为Files），则DataTransfer.prototype.getData()将返回空字符串。

例如：

  • 当拖拽选中文本时，以text/plain格式读取可以获取纯文本；以text/html格式读取可以获取 HTML 片段
  • 当拖拽<a>时，以text/plain或text/uri-list格式读取可以获取<a>的href；以text/html格式读取可以获取 HTML 片段
  • 当拖拽<img>时，以text/plain或text/uri-list格式读取可以获取<img>的src；以text/html格式读取可以获取 HTML 片段

示例：

learn_drag/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <h1>please select some text and drag it into the blue area</h1>
    <a href="https://www.baidu.com/">please drag it into the blue area</a>
    <img
      src="https://www.baidu.com/img/bd_logo1.png"
      alt="please drag it into the blue area"
    />
    <div draggable="true" class="draggable">
      please drag it into the blue area
    </div>
    <div class="droppable"></div>
    <input type="text" placeholder="placeholder" />
    <textarea placeholder="placeholder"></textarea>
  </body>
</html>

learn_drag/css/index.css

1
2
3
4
5
6
7
8
9
10
.draggable {
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.droppable {
  width: 200px;
  height: 200px;
  background-color: #00f;
}

learn_drag/js/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const draggableElement = document.querySelector('.draggable');
const droppableElement = document.querySelector('.droppable');

draggableElement.addEventListener('dragstart', function (event) {
  console.log('dragstart');
});
draggableElement.addEventListener('dragend', function (event) {
  console.log('dragend');
});
draggableElement.addEventListener('drag', function (event) {
  console.log('drag');
});

droppableElement.addEventListener('dragenter', function (event) {
  console.log('dragenter');
});
droppableElement.addEventListener('dragover', function (event) {
  event.preventDefault();
  console.log('dragover');
});
droppableElement.addEventListener('dragleave', function (event) {
  console.log('dragleave');
});
droppableElement.addEventListener('drop', function (event) {
  console.log('drop');
  console.log(event.dataTransfer);
  console.log(event.dataTransfer.types);
  event.dataTransfer.types.forEach(function (value) {
    console.log(event.dataTransfer.getData(value));
  });
});

DataTransfer.prototype.items

DataTransfer.prototype.items是一个类数组对象，它的元素为DataTransferItem

当drop事件发生时，开发者可以通过DataTransferItem.prototype.getAsString()获取数据，DataTransferItem.prototype.getAsString()接受一个回调函数

示例：

learn_drag/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <h1>please select some text and drag it into the blue area</h1>
    <a href="https://www.baidu.com/">please drag it into the blue area</a>
    <img
      src="https://www.baidu.com/img/bd_logo1.png"
      alt="please drag it into the blue area"
    />
    <div draggable="true" class="draggable">
      please drag it into the blue area
    </div>
    <div class="droppable"></div>
    <input type="text" placeholder="placeholder" />
    <textarea placeholder="placeholder"></textarea>
  </body>
</html>

learn_drag/css/index.css

1
2
3
4
5
6
7
8
9
10
.draggable {
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.droppable {
  width: 200px;
  height: 200px;
  background-color: #00f;
}

learn_drag/js/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const draggableElement = document.querySelector('.draggable');
const droppableElement = document.querySelector('.droppable');

draggableElement.addEventListener('dragstart', function (event) {
  console.log('dragstart');
});
draggableElement.addEventListener('dragend', function (event) {
  console.log('dragend');
});
draggableElement.addEventListener('drag', function (event) {
  console.log('drag');
});

droppableElement.addEventListener('dragenter', function (event) {
  console.log('dragenter');
});
droppableElement.addEventListener('dragover', function (event) {
  event.preventDefault();
  console.log('dragover');
});
droppableElement.addEventListener('dragleave', function (event) {
  console.log('dragleave');
});
droppableElement.addEventListener('drop', function (event) {
  console.log('drop');
  console.log(event.dataTransfer);
  console.log(event.dataTransfer.items);
  Array.from(event.dataTransfer.items).forEach(function (value) {
    console.log(value);
    value.getAsString(function (str) {
      console.log(str);
    });
  });
});

写入指定类型的拖拽数据

DataTransfer.prototype.setData()

当dragstart事件触发时，开发者可以通过DataTransfer.prototype.setData()写入指定类型的数据

注意：在且仅能在dragstart事件的回调函数中设置

示例：

learn_drag/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <h1>please select some text and drag it into the blue area</h1>
    <a href="https://www.baidu.com/">please drag it into the blue area</a>
    <img
      src="https://www.baidu.com/img/bd_logo1.png"
      alt="please drag it into the blue area"
    />
    <div draggable="true" class="draggable">
      please drag it into the blue area
    </div>
    <div class="droppable"></div>
    <input type="text" placeholder="placeholder" />
    <textarea placeholder="placeholder"></textarea>
  </body>
</html>

learn_drag/css/index.css

1
2
3
4
5
6
7
8
9
10
.draggable {
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.droppable {
  width: 200px;
  height: 200px;
  background-color: #00f;
}

learn_drag/js/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const draggableElement = document.querySelector('.draggable');
const droppableElement = document.querySelector('.droppable');

draggableElement.addEventListener('dragstart', function (event) {
  console.log('dragstart');
  event.dataTransfer.setData('text/plain', this.textContent);
  event.dataTransfer.setData('text/html', this.outerHTML);
});
draggableElement.addEventListener('dragend', function (event) {
  console.log('dragend');
});
draggableElement.addEventListener('drag', function (event) {
  console.log('drag');
});

droppableElement.addEventListener('dragenter', function (event) {
  console.log('dragenter');
});
droppableElement.addEventListener('dragover', function (event) {
  event.preventDefault();
  console.log('dragover');
});
droppableElement.addEventListener('dragleave', function (event) {
  console.log('dragleave');
});
droppableElement.addEventListener('drop', function (event) {
  console.log('drop');
  console.log(event.dataTransfer);
  console.log(event.dataTransfer.types);
  event.dataTransfer.types.forEach(function (value) {
    console.log(event.dataTransfer.getData(value));
  });
});

DataTransfer.prototype.items.prototype.add()

当dragstart事件触发时，开发者可以通过DataTransfer.prototype.items.prototype.add()写入指定类型的数据

注意：在且仅能在dragstart事件的回调函数中设置

示例：

learn_drag/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <h1>please select some text and drag it into the blue area</h1>
    <a href="https://www.baidu.com/">please drag it into the blue area</a>
    <img
      src="https://www.baidu.com/img/bd_logo1.png"
      alt="please drag it into the blue area"
    />
    <div draggable="true" class="draggable">
      please drag it into the blue area
    </div>
    <div class="droppable"></div>
    <input type="text" placeholder="placeholder" />
    <textarea placeholder="placeholder"></textarea>
  </body>
</html>

learn_drag/css/index.css

1
2
3
4
5
6
7
8
9
10
.draggable {
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.droppable {
  width: 200px;
  height: 200px;
  background-color: #00f;
}

learn_drag/js/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const draggableElement = document.querySelector('.draggable');
const droppableElement = document.querySelector('.droppable');

draggableElement.addEventListener('dragstart', function (event) {
  console.log('dragstart');
  event.dataTransfer.items.add(this.textContent, 'text/plain');
  event.dataTransfer.items.add(this.outerHTML, 'text/html');
});
draggableElement.addEventListener('dragend', function (event) {
  console.log('dragend');
});
draggableElement.addEventListener('drag', function (event) {
  console.log('drag');
});

droppableElement.addEventListener('dragenter', function (event) {
  console.log('dragenter');
});
droppableElement.addEventListener('dragover', function (event) {
  event.preventDefault();
  console.log('dragover');
});
droppableElement.addEventListener('dragleave', function (event) {
  console.log('dragleave');
});
droppableElement.addEventListener('drop', function (event) {
  console.log('drop');
  console.log(event.dataTransfer);
  console.log(event.dataTransfer.items);
  Array.from(event.dataTransfer.items).forEach(function (value) {
    console.log(value);
    value.getAsString(function (str) {
      console.log(str);
    });
  });
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/02/02/%E6%8B%96%E6%8B%BD%E6%95%B0%E6%8D%AE/

本文对你有帮助？请支持我

支付宝
微信