HTML5--拖放事件与dataTransfer对象

最新推荐文章于 2024-06-12 23:23:23 发布

Meskjei

最新推荐文章于 2024-06-12 23:23:23 发布

阅读量1.5w

点赞数 28

分类专栏：前端文章标签： HTML5 拖放 dataTransfer

本文链接：https://blog.csdn.net/hjc256/article/details/89021483

版权

前端专栏收录该内容

70 篇文章 2 订阅

订阅专栏

文章目录

简介
拖放事件
dataTransfer对象
- 方法
例子

简介

若不使用HTML5的拖放事件，我们仍可以通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。

然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。

若要拖放某个元素，则必须将其的draggable属性设置为true。img和a元素默认为true。

拖放事件

拖放的过程中被拖放的对象被称为源对象，过拖放过程中间经过的其他对象被称为过程对象，最终到达的对象称作目标对象。

拖放事件可以用这三种对象来分类，不同的事件会被哪一种对象触发。

源对象：
- dragstart：源对象开始拖放，开始移动时事件触发
- drag：源对象拖放过程中，移动被拖拽对象时触发
- dragend：源对象拖放结束，整个拖放操作结束时触发。
过程对象：
- dragenter：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
- dragover：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发
- dragleave：源对象离开过程对象的范围，被拖拽对象离开目标对象时触发
目标对象：
- drop：源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发。

dataTransfer对象

在所有的拖放事件中都提供了一个数据传输对象dataTransfer，主要是用于在源对象和目标对象之间传递数据。

方法

setData(format, data)
- 设置拖拽事件中要传递的数据，format的参数为数据类型
- 该方法向dataTransfer中对象中存入数据，接受两个参数，第一个表示要存入的数据类型，共有4种：
  - text/plain
  - text/html
  - text/xml
  - text/uri-list
- 第二个参数为要存入的数据，例如：event.dataTransfer.setData('text/plain', 'hello world')

注：如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得dataTransfer.types列表中的最后一个项目将是新类型。

getData(format)
- 获得拖拽事件中传递的数据，format参数为数据类型
- 该方法从dataTransfer对象中读取数据，参数为在setData方法中指定的数据类型，例如：event.dataTransfer.getData('text/plain')
clearData()
- 该方法清空dataTransfer对象中存储的数据，参数可选，为数据类型。若为空，则清空所有数据。
setDragImage(element,x,y)
- 该方法通过img元素来设置拖放图标
- element表示拖拽时鼠标下面的图片（通常是image元素，也可以说canvas元素）
- x、y分别指示相对于图片的横向和纵向偏移量，相对应鼠标指针。
files属性
- 返回被拖拽的文件列表，是一个FileList对象，有length属性，可通过下标访问。

例子

<!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>
  <style>
    .container{
      width: 200px;
      height: 300px;
      background: #ff0000;
    }

    .item{
      width: 200px;
      height: 100px;
      background: pink;
    }

    .dragOver{
      background: rgba(255, 0, 0, 0.5);
    }
    .hidden{
      display: none;
    }
  </style>
</head>
<body>
  <div class="container" id='container' ondragleave="dragleave(event)" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="dragover(event)"></div>
  <div class="item" draggable="true" ondragstart="dragStart(event)" id="item"></div>
  <img src="WechatIMG1607.jpeg" class="hidden"/>
  <script>
    function dragStart(e){
      e.dataTransfer.setData('id', e.target.id);
      let image = document.querySelector('img').cloneNode();
      image.classList.remove('hidden');
      e.dataTransfer.setDragImage(image,150,150);
    }

    function drop(e){
      e.preventDefault();
      let id = e.dataTransfer.getData('id');
      e.target.appendChild(document.getElementById(id));
    }

    function dragover(e){
      e.preventDefault();
      e.target.classList.add('dragOver');
    }

    function dragleave(e){
      console.log('leave');
      e.target.classList.remove('dragOver');
    }    
  </script>
</body>
</html>

如果想自己试试效果可以把图片自行换掉。

效果如下：

在这里插入图片描述

（不要吐槽我为啥放只牛的图片…正好在桌面上看到就用了…）

Meskjei

关注

28
点赞
踩
78

收藏

觉得还不错? 一键收藏
5
评论
HTML5--拖放事件与dataTransfer对象

文章目录简介拖放事件dataTransfer对象方法例子简介若不使用HTML5的拖放事件，我们仍可以通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。若要拖放某个元素，则必须将其...
复制链接

扫一扫

专栏目录