vue中使用drag&drop

H5 原生的drag&drop

• draggable=true（必需）
• ondragstart：拖动开始时触发
• ondrag：拖动过程中触发
• ondragend：拖动结束触发

 

• ondragenter ：被拖动元素进入到目标区域时触发
• ondragover ：被拖动元素在目标区域移动时触发
• ondragleave ：被拖动元素离开目标区域时触发
• ondrop ：释放鼠标时触发

Vue中使用

    <div class="box" @drop="drop($event)"
        @dragover="allowDrop($event)">
        <el-tag v-for="(tag, index) in targetList">{{tag.name}}</el-tag>
    </div>
    <div>
      <el-tag type="success" effect="dark" style="margin-right: 6px;"
        v-for="(item, idx) in list"
        :key="idx"
        draggable="true"
        @dragstart.native="dragStart($event, item)">{{item.name}}</el-tag>
    </div>

注意：

1. 在vue中使用时事件名的变化
2. 如果在第三方组件中使用拖拽事件时，需要加.native