HTML之拖放操作draggable

最近接到一拖拽交互操作，開始的時候就想着傳統的mouseUp,mouseDown，mouseMove之類的方法。但是偶然看到H5的draggable屬性，覺得更香啊！先看下實現的效果。

如圖所示的場景就很適合使用該API，拖拽的過程中鼠標還帶着對應的元素樣式。

draggable="true"

設置元素可拖拽，很簡單，直接加個draggable="true"屬性即可

<li        
        v-for="(item, index) of labels"
        :key="item.id"
        :draggable="true"
      >
</li>

操作API

1. dragstart: 元素開始拖動時觸發
2. dragover: 被拖動的元素hover到目標元素上時觸發
3. dragleave: 被拖動的元素離開目標元素上時觸發
4. dragend: 元素拖動結束時觸發
5. drag: 元素拖動過程中持續觸發

 <li
        v-for="(item, index) of labels"
        :key="item.id"
        :draggable="true"
        @dragover.prevent.stop
        @dragstart="dragStart($event, item)"
        @dragleave="dragleave(item.id)"
        @dragend="dragend"
      >
  <div @dragover.prevent.stop>
    // other code
    ....
  </div>
</li>

拖動樣式

可以看到上面的代碼有個@dragover.prevent.stop，這是因為在拖放的過程中遇到當一個li上有其他元素，例如div p 等，在拖動到其他元素時會出現禁止拖動的圖標
這是因為當拖動元素經過document的時候，document對象會默認阻止拖動事件，因此需要將不需要顯示禁止拖動的元素上設置阻止默認事件。