Vue使用vue-draggable 插件在不同列表之间拖拽功能

2023-07-29 10:52:05 180

今天分享一个vue项目中在不同列表拖拽设置选项的功能，这个功能也是在做项目中遇到的，先说下这个功能的要点(参考下图)，有2个列表，左侧列表展示已选，右侧列表展示未选，通过拖拽进行设置，已选的选项不能超过4个，超过的话自动将拖拽之前的最后一项清除到右侧，且如果从已选往未选里拖的时候，右侧显示垃圾桶的提示(如图)。

拖拽功能图片：

垃圾桶显示图：

首先讲讲vue-draggable的使用

安装vue-draggable:

npminstallvuedraggable

在使用插件的组件内引入vue-draggable并注册组件:

importdraggablefrom"vuedraggable"

components:{
draggable
}

然后在我们需要拖拽的列表中使用：


{{item.name}}

下面是拖拽功能组件的完整代码：





body,ul,dl,dt,dd,li,h1,h3{
margin:0;
padding:0;
}
ul,ol,li{
list-style:none;
}
.theme-setting{
/deep/.el-dialog{
height:476px;
border-radius:6px;
.el-dialog__header{
height:55px;
line-height:56px;
padding:0;
border-bottom:1pxsolidrgba(13,20,30,0.1);
.el-dialog__title{
height:21px;
font-size:16px;
font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
font-weight:bold;
color:rgba(13,20,30,1);
line-height:21px;
}
.el-dialog__headerbtn{
margin-top:-4px;
}
}
.el-dialog__body{
position:relative;
display:flex;
height:331px;
padding:0;
border-bottom:1pxsolidrgba(13,20,30,0.1);
.theme-left{
width:218px;
margin-left:24px;
border-right:1pxsolidrgba(13,20,30,0.1);
.theme-title{
display:flex;
margin-top:24px;
.title{
height:19px;
margin-right:4px;
font-size:14px;
font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
font-weight:bold;
color:rgba(13,20,30,1);
line-height:19px;
}
.des{
height:16px;
font-size:12px;
font-family:MicrosoftYaHei;
color:rgba(13,20,30,0.6);
line-height:19px;
}
}
.selected-list{
height:240px;
margin-top:24px;
overflow:hidden;
.selected-theme{
width:160px;
height:48px;
line-height:48px;
text-align:center;
margin-bottom:16px;
cursor:pointer;
background:linear-gradient(180deg,rgba(43,46,83,1)0%,rgba(108,116,150,1)100%);
border-radius:6px;
font-size:14px;
font-family:MicrosoftYaHei;
color:rgba(255,255,255,1);
}
}
}
.theme-right{
padding:024px;
.theme-right-title{
padding-top:24px;
height:19px;
font-size:14px;
font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
font-weight:bold;
color:rgba(13,20,30,0.4);
line-height:19px;
}
.theme-right-list{
width:357px;
height:240px;
overflow:scroll;
margin-top:24px;
.theme-right-item{
width:160px;
height:48px;
line-height:48px;
float:left;
margin-right:16px;
margin-bottom:16px;
background:rgba(247,248,252,1);
border-radius:6px;
font-size:14px;
font-family:MicrosoftYaHei;
color:rgba(13,20,30,0.4);
text-align:center;
cursor:pointer;
}
}
.theme-right-list::before,.theme-right-list::after{
content:"";
display:table;
}
.theme-right-list::after{
clear:both;
}
}
.drag-drop-del{
position:absolute;
right:1px;
top:0;
width:404px;
height:331px;
display:flex;
justify-content:center;
align-items:center;
background-image:url('../../src/assets/imgs/drapDrop/drag_drop.png');
img{
width:96px;
height:96px;
}
}
}
.el-dialog__footer{
height:88px;
padding:24px24px0;
.dialog-footer{
.el-button+.el-button{
margin-left:16px;
}
}
}
}
}

总结

到此这篇关于Vue使用vue-draggable插件在不同列表之间拖拽功能的文章就介绍到这了,更多相关vuevue-draggable插件拖拽内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue使用vue-draggable 插件在不同列表之间拖拽功能

热门推荐

随机推荐