最近要写一个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轴的位置
\