vue.draggable 拖拽 ant 组件布局

vue.draggable 拖拽

项目需求中，需要支持拖拽，即找到了vue.draggable，下面来说一下基本使用方法
1.首先需要安装它，官网地址 https://www.itxst.com/vue-draggable/tutorial.html
2.安装 npm i -S vuedraggable
3.基本教程请看官网例子
我这边是根据后端接口请求的数据进行布局与官网例子稍有不同
我们首先看一下成果

下面直接上代码+注释

<template><div class="box"><!-- 操作 --><div class="action-box"><a-icon type="unordered-list" class="icon-style" @click="$router.push('/business')" /><a-form-model layout="inline"><a-form-model-item><a-input style="width: 240px" v-model="query.name" allowClear placeholder="商机名称" /><a-button type="primary" style="margin:0 0 0 10px;" @click="handleFilter()">查询</a-button></a-form-model-item></a-form-model><a-icon type="funnel-plot" class="icon-style" title="筛选" @click="openTransfer()" /></div><!-- 阶段 --><div class="stage"><div v-for="(item,index) in boardList" :key="index"><div class="triangle"><span>{{item.stageName}}</span><span class="triangle-right"></span></div></div></div><!-- 阶段内容 --><div class="stage-content"><draggable v-for="(item,index) in boardList" v-model="boardList[index].businessOpportunity" :key="index" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart(index)" @end="onEnd()" @add="onAdd(index)" class="context"><div v-for="val in item.businessOpportunity" :key="val.id" class="stage-box" @mousedown="handleMousedown(val)" :class="val.id ? '':'transparent'"><div><div class="title">{{val.name ? val.name : '--'}}</div><div class="font">{{val.currency ? val.currency : '--'}} {{val.salesAmount ? val.salesAmount : '--'}}</div></div><div style="margin-top:10px;"><div class="title">{{val.companyName ? val.companyName : '--'}}</div><div class="font" v-show="val.id">联系人：{{val.contactsName ? val.contactsName : '--'}}</div><div class="font" v-show="val.id">结单日期：{{val.statementDate ? val.statementDate : '--'}}</div></div></div></draggable></div><a-modal v-model="visible" title="确定更新阶段？" @ok="handleOk" @cancel="cancel"><p>确定将<span class="state-name">{{stateinfoName}}</span>更新到<span class="state-name">{{stateName}}</span>阶段？</p></a-modal><!-- 筛选 --><a-modal title="商机筛选" :footer="null" :visible="isShow" @cancel="close"><a-form-model :label-col="{ span: 5 }" :model="query" :wrapper-col="{ span: 12 }" ref="ruleForm"><a-form-model-item label="商机名称" prop="name"><a-input style="width:300px;" v-model="query.name" placeholder="请输入内容" /></a-form-model-item><a-form-model-item label="公司名称" prop="companyName"><a-input style="width:300px;" v-model="query.companyName" placeholder="请输入内容" /></a-form-model-item><a-form-model-item label="联系人" prop="contactsName"><a-input style="width:300px;" placeholder="请输入内容" v-model="query.contactsName" /></a-form-model-item></a-form-model><div class="modal"><a-button type="primary" @click="handleFilter()">高级筛选</a-button><a-button @click="clear()">清空条件</a-button></div></a-modal></div>
</template>
<script>
import draggable from 'vuedraggable'  //导入拖拽模块
import { selectBusinessOpportunityBoard, updateOpportunityStage } from '../../api/business'  //查询数据接口与拖拽编辑接口
export default {components: {draggable,  //导入组件},data () {return {boardList: [],  //接口返回的所有数据drag: false,  //是否开始拖拽query: {companyName: '', //公司名称contactsName: '', //联系人名称name: '', //商机名称type: 0, //用来区分是否为企业栏,0不是，1是},stateId: undefined, //每个阶段的idvisible: false,  //确定事件弹窗stateName: '',  //阶段名称stateinfoName: '',  //转移的信息名称startIndex: undefined,  //阶段的index，也可以说是 每一列的indexisShow: false  //筛选弹窗};},methods: {// 获取商机阶段信息getBoardList () {selectBusinessOpportunityBoard(this.query).then(res => {this.boardList = res.data //直接将数据赋值 给 boardList })},/* 鼠标按下事件 */handleMousedown (info) {if (info.id) {this.stateinfoId = info.id  //拿到拖拽信息的id，拖拽编辑请求接口用this.stateinfoName = info.name  //拿到拖拽信息的名称，确认弹窗时用} else {return}},//开始拖拽事件onStart (index) {this.drag = true; //开启拖拽this.startIndex = index  //保存拖拽的index，下面要用},//新增事件，如果有新增 拿到新增的index，//获取 this.boardList[index].id 阶段id//获取  this.boardList[index].stageName 阶段的名称onAdd (index) {this.stateId = this.boardList[index].id  //拿到阶段id,拖拽编辑请求接口用this.stateName = this.boardList[index].stageName //拿到阶段名称，确认弹窗时用this.visible = true  //插入的时候显示弹窗，询问是否确定更改阶段},//拖拽结束事件onEnd () {this.drag = false //关闭拖拽},/* 确定更新 ，弹窗确定按钮*/  handleOk () {//请求更新编辑updateOpportunityStage({ opportunityStageId: this.stateId, id: this.stateinfoId }).then(res => {console.log(res)if (res.code == 200) {this.visible = false  //关闭弹窗this.getBoardList()  //编辑后，重新请求查询数据接口return this.$message.success(res.message)}})},/* 弹窗取消保存 */cancel () {this.stateName = ''this.getBoardList()  //确认弹窗取消按钮，重新查询数据},/* 关闭弹窗 */close () {this.isShow = false},/* 打开弹窗 */openTransfer () {this.isShow = true},/* 筛选 */handleFilter () {this.getBoardList(this.query)console.log('父组件拿到的信息', this.query);this.isShow = false},clear () {this.$refs.ruleForm.resetFields();}},mounted () {this.getBoardList()},
};
css
</script>//css保留了,为了复制直接看到结果
<style lang="scss" scoped>
.box {.action-box {display: flex;align-items: center;justify-content: flex-end;padding-bottom: 10px;.icon-style {margin-right: 15px;cursor: pointer;:hover {color: #1890ff;}}}
}
.stage {display: flex;justify-content: space-between;background-color: #3894ff;height: 60px;border-radius: 60px;align-items: center;div {flex: 1;text-align: center;color: #fff;font-size: 16px;}
}.stage-content {box-sizing: border-box;display: flex;justify-content: space-around;.stage-box {min-width: 200px;min-height: 150px;box-sizing: border-box;border: 1px #ccc solid;padding: 5px 10px;margin-top: 10px;}.title {font-size: 14px;font-weight: 600;color: #3894ff;font-family: SourceHanSansSC-regular;padding: 0;}.font {font-size: 14px;color: #8e8e93;font-family: SourceHanSansSC-regular;}
}
.triangle {position: relative;height: 48px;line-height: 48px;padding-right: 30px;.triangle-right {box-sizing: border-box;position: absolute;width: 48px;height: 48px;background-color: transparent;border-top: 5px #fff solid;border-right: 5px #fff solid;left: -58px;transform: rotate(45deg);}
}
.line {min-height: 680px;width: 1px;background-color: #ccc;margin: 0 10px;
}
.context {margin-right: 10px;position: relative;
}
.context::after {content: " ";display: block;min-height: 100%;width: 1px;background-color: #ccc;position: absolute;right: -35%;top: 10px;
}.ghostClass {background-color: blue !important;
}
.chosenClass {background-color: #3895ff52 !important;opacity: 1 !important;
}
.dragClass {background-color: rgba(0, 0, 0, 0.274) !important;opacity: 1 !important;box-shadow: none !important;outline: none !important;background-image: none !important;
}
.itxst {margin: 10px;
}
.title {padding: 6px 12px;
}
.col {width: 40%;flex: 1;padding: 10px;border: solid 1px #eee;border-radius: 5px;float: left;
}
.col + .col {margin-left: 10px;
}.item {padding: 6px 12px;margin: 0px 10px 0px 10px;border: solid 1px #eee;background-color: #f1f1f1;
}
.item:hover {background-color: #fdfdfd;cursor: move;
}
.item + .item {border-top: none;margin-top: 6px;
}
.state-name {margin: 0 5px;color: #3894ff;// font-weight: bold;
}
.transparent {color: transparent !important;border: transparent !important;
}
.modal {display: flex;margin-left: 30px;:nth-child(2) {margin-left: 10px;}
}
</style>

提供一下假数据，可以自行修改

 boardList: [{stageName: "进行中一",id: 21,businessOpportunity: [{companyName: "公司",contactsName: "luo",createdBy: "rojie",currency: "CNY",custumerId: 11,exchangeRate: "1",id: 17,name: "测试商机",opportunityStageId: 22,salesAmount: 100,statementDate: "2022-03-02"},]},{stageName: "进行中二",id: 22,businessOpportunity: [{companyName: "公司",contactsName: "luo",createdBy: "rojie",currency: "CNY",custumerId: 12,exchangeRate: "1",id: 12,name: "测试商机",opportunityStageId: 22,salesAmount: 100,statementDate: "2022-03-02"},]},{stageName: "进行中三",id: 23,businessOpportunity: [{companyName: "公司",contactsName: "luo",createdBy: "rojie",currency: "CNY",custumerId: 13,exchangeRate: "1",id: 17,name: "测试商机",opportunityStageId: 22,salesAmount: 100,statementDate: "2022-03-02"},]},{stageName: "赢单一",id: 24,businessOpportunity: [{companyName: "公司",contactsName: "luo",createdBy: "rojie",currency: "CNY",custumerId: 16,exchangeRate: "1",id: 13,name: "测试商机",opportunityStageId: 22,salesAmount: 100,statementDate: "2022-03-02"},]},{stageName: "输单",id: 26,businessOpportunity: [{companyName: "公司",contactsName: "luo",createdBy: "rojie",currency: "CNY",custumerId: 16,exchangeRate: "1",id: 14,name: "测试商机",opportunityStageId: 22,salesAmount: 100,statementDate: "2022-03-02"},]},],

vue.draggable 拖拽 ant 组件布局相关推荐

vue实现拖拽的组件
<1> 安装通过NPM安装 $ npm install awe-dnd --save 插件应用在main.js中,通过Vue.use导入插件 import VueDND from 'a ...
vue.draggable拖拽生成课程表
需求根据数据源提供的科目及教师信息,拖拽至空白课表内,生成一份课表. 需求分析数据源首先科目有多个,教师也有多个.数据源部分做一个切换选择科目的效果,选取科目后,提供科目及授课人名字. 课表课 ...
Vue.Draggable拖拽功能的配置和使用方法
使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedragg ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue拖拽添加组件的简单实现,具体如下: 效果图实现思路使用 H5 的新特性 ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
vue拖拽排序组件
vue拖拽排序组件 npm install vuedraggable -S vue.draggable中文文档组件代码 <template><div><div cla ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...

vue.draggable 拖拽 ant 组件布局

vue.draggable 拖拽 ant 组件布局相关推荐

最新文章

热门文章