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

 

Logo

前往低代码交流专区

更多推荐