vue拖拽排序插件vuedraggable,

　　这篇文章主要为大家详细介绍了vueDraggable实现拖动改变顺序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件可拖动实现拖动改变顺序的具体代码，供大家参考，具体内容如下

　　1、npm install vuedraggable

　　2、import draggable from vuedraggable

　　3、示例代码

　　测试。某视频剪辑软件

　　模板

　　ul class=sort-ul

　　div45454/div

　　draggable group= article :value= sortArr @ input= handle list change($ event)

　　li v-for=(item，index) in sortArr :key=index

　　h2{{item.title}}/h2

　　/李

　　/可拖动

　　/ul

　　/模板

　　脚本

　　从" vuedraggable "导入可拖动的

　　导出默认值{

　　名称："测试",

　　道具：{

　　},

　　data () {

　　返回{

　　文件列表：[],

　　sortArr:[

　　{标题："00"},

　　{标题： 01},

　　{标题： 02},

　　{标题： 03},

　　{标题： 04},

　　{标题： 05},

　　{标题： 06},

　　{标题： 07},

　　{标题： 08},

　　{标题： 09},

　　],

　　}

　　},

　　组件：{

　　可拖动，

　　},

　　方法：{

　　//更新位置

　　handleListChange(事件){

　　console.log(事件);

　　this.sortArr=事件

　　}

　　},

　　已安装(){

　　}

　　}

　　/脚本

　　风格

　　ul{

　　填充：0;

　　宽度：400像素

　　}

　　李{

　　宽度：100像素

　　浮动：左；

　　}

　　/风格

　　主页。射流研究…

　　从“vue”导入某视频剪辑软件

　　从导入应用程序 0.5/App

　　Vue.config.productionTip=false

　　/* eslint-禁用无-新*/

　　新Vue({

　　埃尔： #app ，

　　组件：{ App }，

　　模板："应用程序/"

　　})

　　app.vue

　　模板

　　div id=应用程序

　　测试/

　　/div

　　/模板

　　脚本

　　从" @/components/Test.vue "导入测试

　　导出默认值{

　　名称："应用程序",

　　组件：{

　　测试，

　　},

　　方法：{

　　}

　　}

　　/脚本

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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