拖放API其原理就是利用事件触发去改变元素的位置或在DOM中的结构;它分一两个场景,一个是拖,一个放。 还有一个关系场景 ,源对象与目标对象的关系。
源对象三个事件:dragstart => 拖动开始
drag => 拖动开始进行中
dragend => 拖动结束
想要实现鼠标跟随效果的话,就要从事件中获得鼠标的坐标;然后赋值给元素,如下代码:
div.οndrag=function(e){
var x=e.pageX; // 获得鼠标在页面的坐标
var x=e.pageX; // 获得鼠标在页面的坐标
}
需要让鼠标保持开始按下的位置的话,还需要获得刚开始的鼠标相对于元素的偏移量;也就是鼠标刚开始按在了元素的哪个位置。
div.οndragstart=function(e){
var x=e.ofsetX; // 获得鼠标偏移量
var x=e.ofsetX; // 获得鼠标偏移量
}
目标对象四个事件:dragenter 拖动进入
dragover 拖动在目标对象上方
dragleave 拖动离开
drop 拖完释放
dragover完成 有个默认行为:触发dragleave 拖动离开事件,导致无法触发drop事件,要触发drop事件需要阻止默认行为。
开发中开发一些效果需要两个对象事件之间传数据,这时又有一个事件对象就登场了,这个对象就是dataTranfer.
我称之为拖拉机对象,这个事件是专门用来承载不同事件源中传输数据的,这七个事件源中都有dataTranfer对象,不过不是同一个,所以需要设置数据,可以看作是个容器。
具体用法:在源对象设置数据,然后到目标对象事件中获取数据。
div.dragstart=function(){
e.dataTranfer.setData( "k", "v" ) //设置数据,只能是键值对的字符串,键相当于对象中的属性名,取数据时需要用它
}
div2.οndrοp=function{
e.dataTranfer.getData( "k" ) //获取之前设置的数据
}
这样就可以实现相要的效果了。