目标对象,源对象

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格式的数据

posted @ 2018-09-10 14:54  maps..xy  阅读(433)  评论(0编辑  收藏  举报