HTML5 拖动事件

注：设置元素可否拖动，需要在HTML文档中的元素上添加draggable属性 。draggable属性的默认值为“true”，即：可拖动。

针对拖放操作的不同阶段，有各种不同事件:

• 用于拖拽目标的事件：
  • ondragstart:用户开始拖拽元素时触发的事件（一般在这里使用element.dataTransfer.XX方法来定义拖动时的效果）
  • ondrag:拖动元素过程中触发的事件
  • ondragend:拖动完毕时触发的事件
• 用于放置目标的事件：
  • ondragenter:拖拽的元素进入放置范围内时触发的事件
  • ondragover:拖动元素来到放置领域上面时触发的事件
  • ondragleave:拖动元素离开放置范围时触发的事件
  • ondrop:可拖动元素放置后触发的事件

注：当拖动元素时，每350毫秒触发ondrag事件一次。

1. Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
2. Event.effectAllowed 属性：就是拖拽的效果。(设置为move，就不会在拖拽时打开新链接)