Drag Drop API

一、步骤:

a.定义可拖动目标

b.定义被拖动的数据,可能为多种不不同格式

c.允许设置拖拽效果

d.定义放置区域

e.在drop发生的时候做些事情

二、dataTransfer():用来保存被拖动的数据

setData():设置数据

getData():获取数据

三、拖放事件

①dragstart拖拽开始

注意:元素默认都是可以被拖拽的设置属性draggable=“true”

如果设置为false,则无法进行拖拽

②dragend拖拽结束

③dragenter拖拽时,鼠标进入

通常在这里添加效果

④dragover拖拽时,鼠标略过,重复执行

设置目标元素允许接受拖放元素

e.preventDefault();或return false

⑤dragleave拖拽时,鼠标离开,通常在这里移除效果

⑥drop拖放的时候放下(如果要触发drop事件,则必须清理掉标签的dragover事件。因为dragover事件只要被触发,就会拦截drop事件,直接执行dragend事件)

Drag Drop API_第1张图片

示例:jquery实现标签拖拽

Drag Drop API_第2张图片
Drag Drop API_第3张图片

你可能感兴趣的:(Drag Drop API)