如何在vue中利用vue-亚博电竞手机版

如何在vue中利用vue-draggable 插件实现在不同列表间的拖拽功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

安装vue-draggable:

npm install vuedraggable

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

importdraggablefrom"vuedraggable"  components:{ draggable }

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

 {{item.name}} 

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

    body,ul,dl,dt,dd,li,h2,h4{ 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:; img{ width:96px; height:96px; } } } .el-dialog__footer{ height:88px; padding:24px24px0; .dialog-footer{ .el-button .el-button{ margin-left:16px; } } } } } 

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。