用vue如何做拖拽排序的功能?
发布时间:2022-01-07 00:13:26 所属栏目:语言 来源:互联网
导读:本文给大家分享用vue怎样做拖拽排序的功能,小编觉得比较实用,因此分享给大家做个参考,实现效果及代码如下,这里提供一种简单的实现方案,感兴趣的朋友可以了解看看。 首先,我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart -
本文给大家分享用vue怎样做拖拽排序的功能,小编觉得比较实用,因此分享给大家做个参考,实现效果及代码如下,这里提供一种简单的实现方案,感兴趣的朋友可以了解看看。 首先,我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop - 在一个拖动过程中,释放鼠标键时触发此事件 基于js的原生拖拽事件,本次实现的拖拽排序的原理大概是:鼠标按住列表某一项开始拖动时触发ondragstart事件,将该拖动项用变量记录下来; 接着拖拽过程中,该拖动项经过列表其他项时,触发ondragenter事件,同样记录该拖动项最后经过的列表其他项的数据,最后在ondragend 事件中 将数组列表删掉一开始ondragstart事件记录的拖动项,并将删掉的数据插入ondragenter事件最后记录的位置,完成拖动排序。 具体代码如下: <template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort"> <div v-for="(item) in dataList" :key='item.id' class="sort-item" :draggable="true" @dragstart="dragstart(item)" @dragenter="dragenter(item,$event)" @dragend="dragend(item,$event)" @dragover="dragover($event)" > {{ item.label }} </div> </transition-group> </div> </template> <script lang="ts"> import {Vue, Component, Prop, Watch} from "vue-property-decorator"; import { addWebsite } from '@/api' @Component({ components: {} }) export default class Test extends Vue { oldData: any = null; // 开始排序时按住的旧数据 newData: any = null; // 拖拽过程的数据 // 列表数据 dataList:any = [ { id:1,label:'测试一号' }, { id:2,label:'测试二号' }, { id:3,label:'测试三号' }, { id:4,label:'测试四号' }, ]; dragstart(value: any) { this.oldData = value } // 记录移动过程中信息 dragenter(value: any, e: any) { this.newData = value e.preventDefault() } (编辑:威海站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |