幽灵资源网 Design By www.bzswh.com
今天分享一个vue项目中在不同列表拖拽设置选项的功能，这个功能也是在做项目中遇到的，先说下这个功能的要点(参考下图)，有2个列表，左侧列表展示已选，右侧列表展示未选，通过拖拽进行设置，已选的选项不能超过4个，超过的话自动将拖拽之前的最后一项清除到右侧，且如果从已选往未选里拖的时候，右侧显示垃圾桶的提示(如图)。
拖拽功能图片：
垃圾桶显示图：
首先讲讲vue-draggable的使用
安装vue-draggable:
npm install vuedraggable
在使用插件的组件内引入vue-draggable并注册组件:
import draggable from "vuedraggable"
components: {
draggable
}
然后在我们需要拖拽的列表中使用：
<draggable class="selected-list" tag="ul"
v-model="selectedTheme"
v-bind="dragOptions"
:move="onMove"
@end="onEnd"
>
<li class="selected-theme"
v-for="item in selectedTheme"
:key="item.type"
>{{item.name}}</li>
</draggable>
下面是拖拽功能组件的完整代码：
<template>
<div class="theme-setting">
<el-dialog
title="设置选项"
:visible.sync="dialogVisible"
width="648px"
:close-on-click-modal="false"
>
<div class="theme-left">
<dl class="theme-title">
<dt class="title">当前选项</dt>
<dd class="des">从右侧拖拽添加</dd>
</dl>
<draggable class="selected-list" tag="ul"
v-model="selectedTheme"
v-bind="dragOptions"
:move="onMove"
@end="onEnd"
>
<li class="selected-theme"
v-for="item in selectedTheme"
:key="item.type"
>{{item.name}}</li>
</draggable>
</div>
<div class="theme-right">
<h3 class="theme-right-title">全部选项</h3>
<draggable class="theme-right-list" tag="ul"
v-model="unSelectTheme"
v-bind="dragOptions"
:move="onMove"
@end="onEnd">
<li class="theme-right-item"
v-for="item in unSelectTheme"
:key="item.type"
>{{item.name}}</li>
</draggable>
</div>
<div class="drag-drop-del" v-show="isShowDel">
<img src="/UploadFiles/2021-04-02/drag_drop_del.png">
总结
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...