拖拽drag_HTML5之自定义drag实践

先前对drag 拖拽相关api接触比较少 这次需求迭代中交互用到了。看了很多相关文章、也实践了不少demo 发觉相关文章还是比较少 功能点也比较分散 这里记录下 希望对大家会有帮助。

首先我们需要知道一些drag涉及到的属性和方法 (详细可见 拖放 API)

1. draggable 属性： 顾名思义就是可以允许我们拖拽该元素
2. dragstart 事件：拖拽开始时会触发
3. dragover事件：拖拽在目标元素上移动时会触发
4. dragend 事件： 拖拽结束时 松开鼠标时触发
5. drag 事件： 拖拽期间会一直触发
6. dragenter 事件：拖拽进入目标元素时会触发
7. dragleave 事件： 拖拽离开目标元素时会触发
8. drop 事件： 当拖拽到目标元素松手时会触发

了解这些看一下下面的demo

<template>
  <div id="app" class="item_container">
    <div v-for="(item, index) in animationList || list"
         :key="item.id"
         :class="['drag-item-container', dragFile.id === item.id ? 'opacity' : '']"
         @dragstart="handleDragStart($event, item, index)"
         @dragover="preventDefault"
         @drag="handleDragListener"
         @dragend="handleDragEnd"
         @drop="handleDrop($event, item, index)"
         @dragenter="handleDragEnter($event, item, index)"
         :draggable="true">
        <div class="drag-item">{
    {item.title}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: '拖拽块-1'},
        { id: 2, title: '拖拽块-2'},
        { id: 3, title: '拖拽块-3'},
        { id: 4, title: '拖拽块-4'},
        { id: 5, title: '拖拽块-5'},
        { id: 6, title: '拖拽块-6'}
      ],
      animati