js 拖拽控件生成自定义表单 怎么实现

JavaScript067

js 拖拽控件生成自定义表单 怎么实现,第1张

说说步骤吧

监听mousedown事件

- 获取鼠标点击元素，判断是否可拖拽

- 设置flag做标记

- 建一个tempDOM，与拖拽的DOM内容相同，并添加相应样式

- 监听鼠标移动事件

- 判断flag

- 移动tempDOM

- 监听mouseup事件

- 判断flag标记

- 清楚flag标记

- 获取DOM排列顺序

- 重排

1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了

2.拖动事件:

开始拖动时dragstart

进行拖动时drag

结束拖动时dragend

3.拖拽区域触发事件:

拖拽元素进入区域时触发dragenter

拖拽元素进入区域后悬停触发dragover

拖拽元素离开区域时触发dragleave

拖拽元素放置时触发drop