vue拖拽表单,js列表拖动排序

　　本文主要介绍了某视频剪辑软件实现列表拖拽排序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

　　本文主要介绍了某视频剪辑软件实现列表拖拽排序的示例代码，具体如下：

　　模板

　　div class= test _ wrapper @ dragover= dragover($ event)

　　transition-group class= transition-wrapper name= sort

　　dataList中的div v-for=(item):key= item。id class=排序项目

　　:draggable=true

　　@dragstart=dragstart(item)

　　@dragenter=dragenter(item，$event)

　　@dragend=dragend(item，$event)

　　@dragover=dragover($event)

　　{{ item.label }}

　　/div

　　/过渡-组

　　/div

　　/模板

　　脚本语言

　　从" vue-属性-装饰"导入{Vue，组件，道具，手表}；

　　从" @/api "导入{添加网站}

　　@组件({

　　组件：{}

　　})

　　导出默认类测试扩展Vue {

　　旧数据：any=null//开始排序时按住的旧数据

　　新数据：any=null//拖拽过程的数据

　　//列表数据

　　数据列表：any=[

　　{ id:1，标签:测试一号 },

　　{ id:2，标签:测试二号 },

　　{ id:3，标签:测试三号 },

　　{ id:4，标签:测试四号 },

　　];

　　拖拽开始(值：任意){

　　this.oldData=value

　　}

　　//记录移动过程中信息

　　拖拽输入器(值：任何，e:任何){

　　this.newData=value

　　预防默认()

　　}

　　//拖拽最终操作

　　dragend(value: any，e: any) {

　　如果(this.oldData！==this.newData) {

　　设老指数=这个。数据表。的索引。旧数据)

　　设新指数=这个。数据表。的索引。新数据)

　　let newItems=[.this.dataList]

　　//删除老的节点

　　newItems.splice(oldIndex，1)

　　//在列表中目标位置增加新的节点

　　newItems.splice(newIndex，0，this.oldData)

　　this.dataList=[.新项目]

　　}

　　}

　　//拖动事件（主要是为了拖动时鼠标光标不变为禁止)

　　dragover(e: any) {

　　预防默认()

　　}

　　};

　　/脚本

　　风格。排序-移动{

　　转场：变换0.3秒

　　}

　　/风格

　　到此这篇关于某视频剪辑软件实现列表拖拽排序的示例代码的文章就介绍到这了，更多相关某视频剪辑软件列表拖拽排序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。