拖放事件，dataTransfer，getBoundingClientRect

最近要写一个lowcode项目，对于我这个只写过网页项目的人来说，真的是啥也不会啊。看了一个项目的源码，看这里的东西好好学习一下，顺便复习一下原来的东西。QAQ

首先是

从没用过的拖拽

拖放事件

拖放事件中有三种对象。

• 源对象：过程中被拖放的对象
• 过程对象：拖放中经过的对象
• 目标对象：最终到达的对象

这三种对象有其不同的触发事件

• 源对象

  • dragstart：开始拖放，开始移动时事件触发。
  • drag：拖放过程中，移动被拖拽对象时触发。
  • dragend：拖放结束，整个拖放操作结束时触发。

• 过程对象

  • dragenter：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
  • dragover：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发
  • dragleave：源对象离开过程对象的范围，被拖拽对象离开目标对象时触发

• 目标对象：

  • drop：在目标对象内松手时触发。

dataTransfer对象

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

方法

• setData(format, data)

  • 设置拖拽事件中要传递的数据，format的参数为数据类型

  • 该方法向dataTransfer中对象中存入数据，接受两个参数，第一个表示要存入的数据类型，共有4种：

    • text/plain
    • text/html
    • text/xml
    • text/uri-list
    • 如果写入的参数不是上面这几种，就相当于新创了一个数据类型。使得dataTransfer.types列表中的最后一个项目将是新类型。

  • 参数2是要存入的数据

  • 例：e.dataTransfer.setData("num",index)

• getData(format)

  • 获得拖拽事件中传递的数据，format参数为数据类型
  • 该方法从dataTransfer对象中读取数据，参数为在setData方法中指定的数据类型，例如：event.dataTransfer.getData('text/plain')

• clearData()

  • 有参数：清空该参数对应存储的数据
  • 无参数：清空所有数据

getBoundingClientRect()

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口（电脑屏幕）的位置。

连带复习：

clientX：当鼠标事件发生时,鼠标相对于浏览器(浏览器上显示页面得位置)X轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置
1
2
3
4
5
6

\