vue中使用drag&drop
H5 原生的drag&dropdraggable=true(必需)ondragstart:拖动开始时触发ondrag:拖动过程中触发ondragend:拖动结束触发ondragenter :被拖动元素进入到目标区域时触发ondragover :被拖动元素在目标区域移动时触发ondragleave :被拖动元素离开目标区域时触发ondrop :释放鼠标时触发Vue中使用<div cla
·
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>
注意:
- 在vue中使用时事件名的变化
- 如果在第三方组件中使用拖拽事件时,需要加.native
更多推荐
已为社区贡献4条内容
所有评论(0)