vuedraggable拖拽,vue拖拽排序插件vuedraggable

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

　　本文实例为大家分享了vuedraggable实现拖拽功能的具体代码，供大家参考，具体内容如下

一、下载依赖

　　NPM岛

二、代码块

　　模板

　　差异

　　a-checkbox-group @ change= onChange

　　可拖动组=人民

　　class=list-group

　　鬼-class=鬼

　　:move=checkMove

　　！-

　　:list=myArray

　　:disabled=！已启用

　　@start=drag=true

　　@end=drag=false

　　-

　　myArray中的div class= list-group-item v-for=(item，index):key= item。索引

　　复选框：value= item。值“{ item。名称} }/a-复选框

　　/div

　　/可拖动

　　/a-复选框-组

　　/div

　　/模板

　　脚本

　　//引入vuedraggable

　　从" vuedraggable "导入可拖动的

　　导出默认值{

　　组件：{可拖动},

　　data () {

　　返回{

　　启用：真，

　　缅甸：[{

　　名称：临汾，

　　值：1

　　},{

　　名称：运城，

　　值：2

　　},{

　　名称：长治，

　　值：3

　　},{

　　名称：晋城，

　　值：4

　　}],

　　}

　　},

　　方法：{

　　onChange(checkedValues) {

　　console.log(检查值);//复选框选中的值

　　},

　　checkMove(){

　　console.log(this.myArray) //实时为自定义的数组名数据，每拖动一次就会得到最新的排列数据

　　},

　　}

　　}

　　/脚本

　　样式范围。翻转-列表-移动{

　　-WebKit-transition:-WebKit-transform 0.5s；

　　过渡：-WebKit-transform 0.5s；

　　过渡：变换0.5s

　　过渡：转换0.5s，-WebKit-转换0.5s；

　　}。禁止移动{

　　-WebKit-transition:-WebKit-transform 0s；

　　转换：-网络工具包-转换0s；

　　过渡：转换0s；

　　转换：转换0s，-WebKit-转换0s；

　　}。幽灵{

　　不透明度：0.5;

　　背景：# c 8 ebfb

　　}。列表-组{

　　最小高度：20px

　　}。列表-组-项目{

　　光标：移动；

　　}。列表-组-项目我{

　　光标：指针；

　　}。列表-组-项目：第一个子项目{

　　border-top-left-radius:4px；

　　border-top-right-radius:4px；

　　}。列表-组-项目{

　　位置：相对；

　　显示：块；

　　填充：10px 105px

　　边距-底部：-1px；

　　背景色：# fff

　　边框：1px固体# ddd

　　}。列表-组-项目：最后一个子项目{

　　边距-底部：0;

　　边框-底部-右侧-半径：4px

　　边框-底部-左侧-半径：4px

　　}

　　/风格

三、效果图

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

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