码迷,mamicode.com
首页 > 其他好文 > 详细

目标对象,源对象

时间:2018-09-10 15:36:30      阅读:969      评论:0      收藏:0      [点我收藏+]

标签:返回   efault   img   文件   enter   ble   默认   effect   types   

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

目标对象,源对象

标签:返回   efault   img   文件   enter   ble   默认   effect   types   

原文地址:https://www.cnblogs.com/mapsxy/p/9619667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!