目标对象，源对象

Posted 2021-01-05 mapsxy

1、给要拖放的元素添加draggable=true
a，img本身具有可拖放性

2、源对象
ondragstart：开始被拖放
ondrag：拖拽过程中
dragend ：拖拽结束

3、目标对象
ondragenter：当拖拽元素进入目标文件的时候触发的事件
ondragover:当拖拽元素穿过目标元素的时候触发的事件
dragleave：鼠标经过该元素离开本元素触发该事件；
ondrop：当拖拽元素在目标元素上同时放开鼠标时触发的时候
e.preventDefault()：阻止默认行为
e.effectAllowed属性：拖拽效果
none：不允许被drop
copy：源项目的复制项可能会出现在新的位置
copyLink：允许copy或者link操作
copyMove：允许copy或者move操作
link：可以在新的地方建立与源的连接
linkMove：允许link或者move操作
move：一个项目可能被移动到新的位置
All：允许所有操作
事件触发顺序
ondragstart>ondragenter>ondragover>ondrop>ondragend

4、e..dataTransfer{}：用来在源对象和目标对象之间传递数据用的
存值：源对象事件处理中保存数据
e.dataTransfer.setData（k，v）k，v必须是字符串
取值：目标对象上的时间处理取数据
e.dataTrabsfer.getDate（k）
dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为
dataTransfer.items:拖动数据
dataTransfer.setDragImage(element,x,y):设置被拖放操作的自定义图标
dataTransfer.addElement(element)：添加自定义图标
dataTransfer.types:存入数据的所有类型
dataTransfer.getData（formate）：设置format格式的数据