html5 拖拽事件

---

前言

拖拽是个非常普遍的功能。在使用电脑的过程中，拖放一个东西是相当常见。很多javascript都类似实现了相关的功能，例如，jQueryUI的draganddrop组件。在HTML5中，拖拽成为了标准操作，任何元素都可以进行拖放。

---

一、draggable属性

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

 <span draggable="true">我是span</span>

二、拖拽元素事件

• dragstart：拖拽前触发，即鼠标按下，被拖拽元素被拖拽的瞬间触发。
• drag：拖拽前、拖拽结束之间连续触发，即使鼠标没有移动，只要未释放，都会触发。
• dragend:拖拽结束触发，即释放鼠标触发。

代码如下（示例）：

 <div class="boss" draggable="true"></div>
    <script>
         var boss = document.getElementsByClassName("boss")[0];
         //拖拽开始
         boss.ondragstart   = function(){
             console.log("dragstart");
         }
          //拖拽中
         boss.ondrag   = function(){
             console.log("drag");
         }
         //拖拽结束
         boss.ondragend= function(){
             console.log("dragend");
         }
    </script>

三、目标元素事件

• dragenter：进入目标元素触发，相当于mouseover
• dragover：被拖拽元素在目标元素上移动时触发，相当于mousemove
• dragleave：被拖拽元素离开目标元素时触发
• drop：被拖拽元素放置在目标元素上时触发（释放鼠标）
  代码如下（示例）：

   target.ondragenter = function() {
            //当拖拽的鼠标进入触发
            console.log("ondragenter");

        }
        target.ondragover = function() {
            //当拖拽元素在目标元素中移动时触发
            console.log("ondragover");
        }
        target.ondragleave = function() {
            //当拖拽元素离开目标元素时触发
            console.log("ondragleave");

        }

四、事件执行顺序

• drop不触发的时候：dragstart > drag > dragenter > dragover > dragleave > dragend

• drop触发的时候（dragover阻止了默认事件）：dragstart > drag > dragenter > dragover > drop > dragend

---