drag and drop(拖拽)

拖拽元素事件 : 事件对象为被拖拽元素

dragstart :  拖拽前触发 
drag :拖拽前、拖拽结束之间，连续触发
dragend  : 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter :  进入目标元素触发，相当于mouseover
dragover : 进入目标、离开目标之间，连续触发
dragleave :  离开目标元素触发，相当于mouseout
drop  :  在目标元素上释放鼠标触发

事件的执行顺序 ：drop不触发的时候

dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend 

事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)

dragstart  >  drag >  dragenter >  dragover >  drop > dragend

解决火狐下的问题

火狐浏览器下必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签。

dataTransfer属性和方法

    属性              描述
    dropEffect      设置或获取拖曳操作的类型和要显示的光标类型。
    effectAllowed    设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

    setDragImage    三个参数：指定的元素，坐标X，坐标Y
    files           获取外部拖拽的文件，返回一个filesList列表。filesList下有个type属性，返回文件的类型


    方法            描述
    clearData   通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。

    setData() : 设置数据 key和value(必须是字符串)

    getData() : 获取数据，根据key值，获取对应的value

只有加阻止默认事件才可以触发drop

 oDiv.ondragover = function(ev){  //只有加阻止默认事件才可以触发drop
        ev.preventDefault();
    };