【学习笔记】HTML 5 拖放

　　

 draggable属性详解　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

作用：用于指定标签是否可被拖拽

　　属性值范围如下：

　　1.  true ，表示可被拖拽

　　2.  false ，表示不可被拖拽

　　3.  auto ，默认值，img和带href属性的a标签则表示可拖拽，其他标签表示不可被拖拽

　　4. 其他值，表示不可被拖拽

关键点：

　　1. 为触发拖拽的元素添加 draggable="true" 特性，用于启动HTML5的DnD功能（即元素的 dragstart 事件可被触发）；

　　2. 在FF下即使添加 draggable="true" 特性，但仅仅会触发 dragstart 事件，但DnD功能并没有被完全打开（拖拽元素时没有任何视觉效果），需要调用 event.dataTransfer.setData('Text','') 彻底开启DnD功能。

　　3. 在Safari4下则需要借助CSS规则来启动DnD功能， [draggable=true]{ -webkit-user-drag: element; } 

 

dragenter ：当被拖拽元素进入目标元素时触发

dragover ：当被拖拽元素在目标元素上移动时触发

    注意：

     [a]. 可以在这里设置dropEffect的值，事件的默认行为是将dropEffect设置为none

     [b]. 该事件是被拖拽元素在目标元素上移动一段时间后才触发

     [c]. 事件的默认行为是不允许被拖拽元素在其他元素上释放或放置（即无法触发 drop 事件），需要通过 event.preventDefault() 来阻止默认行为才能触发后续的 drop 事件。

   drop ：当被拖拽元素在目标元素上，而且释放鼠标左键时触发

    注意：

    [a]. 对于外来的被拖拽元素（超链接、文件、图片源）， drop 事件的默认行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上

    [b]. 对文档内部的被拖拽元素，IE10+和Chrome下的默认行为是不作为，而FF得默认行为是新打开一个文档用于访问被拖拽元素所指向的资源

   dragleave ：当被拖拽元素离开目标元素时触发。

 

dragstart -> drag -> dragenter -> dragover ->  dragleave  -> drop -> dragend