自己封装的vue拖拽组件

使用Vue.Draggable实现

Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article/details/79809687

实现效果如下，用的好的话点个赞谢谢

<template><div class="dndList"><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="事务执行" name="first"><!--所有的能力项--><div class="dndList-list1"><div class="fontz1 pos1">事务型：</div><div class="fontz1 pos2">操作型：</div><div class="fontz1 pos3">技能型：</div><draggable:list="oldList1":options="{group: { name: falgs, pull: 'clone' },filter: '.undraggable',sort: false,}"@end="end1"class="dragArea"><divv-for="element in oldList1":key="element.id":class="{ undraggable: element.flag }"class="list-complete-item2"><div class="list-complete-item-handle2">{{ element.name }}</div></div></draggable></div></el-tab-pane><el-tab-pane label="研发策划" name="second"><div class="dndList-list1"><div class="fontz1 pos1">事务型：</div><div class="fontz1 pos2">操作型：</div><div class="fontz1 pos3">技能型：</div><draggable:list="oldList2":options="{group: { name: falgs, pull: 'clone' },filter: '.undraggable',sort: false,}"@end="end2"class="dragArea"><divv-for="element in oldList2":key="element.id":class="{ undraggable: element.flag }"class="list-complete-item2"><div class="list-complete-item-handle2">{{ element.name }}</div></div></draggable></div></el-tab-pane><el-tab-pane label="服务关系" name="third"><div class="dndList-list1"><div class="fontz1 pos1">事务型：</div><div class="fontz1 pos2">操作型：</div><div class="fontz1 pos3">技能型：</div><draggable:list="oldList3":options="{group: { name: falgs, pull: 'clone' },filter: '.undraggable',sort: false,}"@end="end3"class="dragArea"><divv-for="element in oldList3":key="element.id":class="{ undraggable: element.flag }"class="list-complete-item2"><div class="list-complete-item-handle2">{{ element.name }}</div></div></draggable></div></el-tab-pane><el-tab-pane label="开拓影响" name="fourth"><div class="dndList-list1"><div class="fontz1 pos1">事务型：</div><div class="fontz1 pos2">操作型：</div><div class="fontz1 pos3">技能型：</div><draggable:list="oldList4":options="{group: { name: falgs, pull: 'clone' },filter: '.undraggable',sort: false,}"@end="end4"class="dragArea"><divv-for="element in oldList4":key="element.id":class="{ undraggable: element.flag }"class="list-complete-item2"><div class="list-complete-item-handle2">{{ element.name }}</div></div></draggable></div></el-tab-pane></el-tabs><div class="dndList-list" style="font-size:18px; border-top: none; border-bottom: none;"><span>将所需要的内在能力拖拽至下方框中</span></div><!--需要的能力项--><div class="dndList-list"><div><div class="rongqi"><div></div><div></div><div></div><div></div></div><el-row><el-col :span="3"><div class="fontz">主要能力：</div></el-col><el-col :span="20"><draggable:list="list1":options="{ group: 'article', disabled: disabled }"@start="start22"@end="end22"class="dragArea11"style="height: 90px"><divv-for="(element, index) in list1":key="element.id"class="list-complete-item"><div class="list-complete-item-handle">{{ element.name }}<iclass="el-icon-delete"@click="handleDel1(index, element.id)"></i></div></div></draggable></el-col></el-row></div><div><div class="rongqi"><div></div><div></div><div></div><div></div></div><el-row><el-col :span="3"><div class="fontz">辅助能力：</div></el-col><el-col :span="20"><draggable:list="list2":options="{ group: 'article', disabled: disabled }"@start="start22"@end="end22"class="dragArea11"style="height: 90px"><divv-for="(element, index) in list2":key="element.id"class="list-complete-item"><div class="list-complete-item-handle">{{ element.name }}<iclass="el-icon-delete"@click="handleDel2(index, element.id)"></i></div></div></draggable></el-col></el-row></div><div><div class="rongqi"><div></div><div></div><div></div><div></div></div><el-row><el-col :span="3"><div class="fontz">次要能力：</div></el-col><el-col :span="20"><draggable:list="list3":options="{ group: 'article', disabled: disabled }"@start="start22"@end="end22"class="dragArea11"style="height: 90px"><divv-for="(element, index) in list3":key="element.id"class="list-complete-item"><div class="list-complete-item-handle">{{ element.name }}<iclass="el-icon-delete"@click="handleDel3(index, element.id)"></i></div></div></draggable></el-col></el-row></div></div></div>
</template>
<script>
import draggable from "vuedraggable";export default {name: "DndList",components: { draggable },watch: {},data() {return {activeName: "first",falgs: "article",disabled: false,list1: [],list2: [],list3: [],oldList1: [{ id: 1, name: "能力1" },{ id: 2, name: "能力2" },{ id: 3, name: "能力3" },{ id: 4, name: "能力4" },{ id: 5, name: "能力5" },{ id: 6, name: "能力6" },{ id: 7, name: "能力7" },{ id: 8, name: "能力8" },{ id: 9, name: "能力9" },{ id: 10, name: "能力10" },{ id: 11, name: "能力11" },{ id: 12, name: "能力12" },],oldList2: [{ id: 13, name: "能力13" },{ id: 14, name: "能力14" },{ id: 15, name: "能力15" },{ id: 16, name: "能力16" },{ id: 17, name: "能力17" },{ id: 18, name: "能力18" },{ id: 19, name: "能力19" },{ id: 20, name: "能力20" },{ id: 21, name: "能力21" },{ id: 22, name: "能力22" },{ id: 23, name: "能力23" },{ id: 24, name: "能力24" },],oldList3: [{ id: 25, name: "能力25" },{ id: 26, name: "能力26" },{ id: 27, name: "能力27" },{ id: 28, name: "能力28" },{ id: 29, name: "能力29" },{ id: 30, name: "能力30" },{ id: 31, name: "能力31" },{ id: 32, name: "能力32" },{ id: 33, name: "能力33" },{ id: 34, name: "能力34" },{ id: 35, name: "能力35" },{ id: 36, name: "能力36" },],oldList4: [{ id: 37, name: "能力37" },{ id: 38, name: "能力38" },{ id: 39, name: "能力39" },{ id: 40, name: "能力40" },{ id: 41, name: "能力41" },{ id: 42, name: "能力42" },{ id: 43, name: "能力43" },{ id: 44, name: "能力44" },{ id: 45, name: "能力45" },{ id: 46, name: "能力46" },{ id: 47, name: "能力47" },{ id: 48, name: "能力48" },],};},watch: {list1(val) {if(val.length>4){this.handleDel1(4,val[4].id)}},list2(val) {if(val.length>4){this.handleDel2(4,val[4].id)}},list3(val) {if(val.length>4){this.handleDel3(4,val[4].id)}},},computed: {},methods: {childMethod(){console.log(this.oldList1)console.log(this.oldList2)console.log(this.oldList3)console.log(this.oldList4)console.log(this.list1)console.log(this.list2)console.log(this.list3)},handleClick(tab, event) {console.log(tab, event);},end1(ev) {if (ev.to.className === "dragArea11") {this.$set(this.oldList1[ev.oldIndex], "flag", true);}},end2(ev) {if (ev.to.className === "dragArea11") {this.$set(this.oldList2[ev.oldIndex], "flag", true);}},end3(ev) {if (ev.to.className === "dragArea11") {this.$set(this.oldList3[ev.oldIndex], "flag", true);}},end4(ev) {if (ev.to.className === "dragArea11") {this.$set(this.oldList4[ev.oldIndex], "flag", true);}},start22(event) {this.falgs = "222222";},end22(ev) {this.falgs = "article";},handleDel1(index, id) {this.list1.splice(index, 1);var q;if (id < 13) {q = this.oldList1.find((value, index, arr) => {return value.id === id;});} else if (12 < id && id < 25) {q = this.oldList2.find((value, index, arr) => {return value.id === id;});} else if (24 < id && id < 37) {q = this.oldList3.find((value, index, arr) => {return value.id === id;});} else {q = this.oldList4.find((value, index, arr) => {return value.id === id;});}this.$set(q, "flag", false);},handleDel2(index, id) {this.list2.splice(index, 1);var q;if (id < 13) {q = this.oldList1.find((value, index, arr) => {return value.id === id;});} else if (12 < id && id < 25) {q = this.oldList2.find((value, index, arr) => {return value.id === id;});} else if (24 < id && id < 37) {q = this.oldList3.find((value, index, arr) => {return value.id === id;});} else {q = this.oldList4.find((value, index, arr) => {return value.id === id;});}this.$set(q, "flag", false);},handleDel3(index, id) {this.list3.splice(index, 1);var q;if (id < 13) {q = this.oldList1.find((value, index, arr) => {return value.id === id;});} else if (12 < id && id < 25) {q = this.oldList2.find((value, index, arr) => {return value.id === id;});} else if (24 < id && id < 37) {q = this.oldList3.find((value, index, arr) => {return value.id === id;});} else {q = this.oldList4.find((value, index, arr) => {return value.id === id;});}this.$set(q, "flag", false);},},
};
</script><style rel="stylesheet/scss" lang="scss" scoped>
.pos1 {position: absolute;top: 20px;
}
.pos2 {position: absolute;top: 92px;
}
.pos3 {position: absolute;top: 162px;
}
.rongqi {width: 100%;position: absolute;left: 120px;div {float: left;width: 150px;height: 50px;border-radius: 4px;margin: 20px 20px 0 0;border: 1px solid #000;}
}
.dragArea11 {width: 700px;overflow: hidden;
}.dndList-list1 {color: #000;position: relative;width: 830px;border: 1px solid #000;padding: 0 20px 20px;border-top: none;//   margin: 20px;
}
.dndList-list {color: #000;width: 830px;border: 1px solid #000;padding: 20px;//   margin: 20px;
}
.fontz {height: 100px;line-height: 90px;font-size: 18px;font-family: "微软雅黑";font-weight: 600;
}
.fontz1 {height: 50px;line-height: 50px;font-size: 18px;font-family: "微软雅黑";font-weight: 600;
}
.list-complete-item {cursor: pointer;position: relative;font-size: 16px;line-height: 50px;text-align: center;display: inline-block;margin-right: 20px;width: 150px;height: 50px;border-radius: 4px;margin: 20px 20px 0 0;border: 1px solid #000;transition: all 1s;
}
.dragArea {width: 680px;position: relative;right: -98px;
}
.list-complete-item2 {cursor: pointer;position: relative;font-size: 16px;line-height: 50px;text-align: center;display: inline-block;margin: 20px 20px 0 0;width: 150px;height: 50px;border-radius: 4px;border: 1px solid #000;transition: all 1s;
}
.list-complete-item.sortable-chosen {background: #4AB7BD;
}.list-complete-item.sortable-ghost {background: #30B08F;
}
.undraggable {background-color: #ccc;
}.list-complete-enter,
.list-complete-leave-active {opacity: 0;
}
</style>
<style lang="less">
.dndList {.el-tabs__header {width: 830px;margin: 0;border: 1px solid #000;}.el-tabs__nav-wrap::after {background-color: #000;}.el-tabs__item {font-size: 20px;height: 50px;line-height: 50px;width: 200px;text-align: center;}
}
</style>

自己封装的vue拖拽组件相关推荐

Vue拖拽组件开发实例
为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: 使用虚拟DOM: ...
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
vue拖拽组件超好用！！！
vue拖拽组件在vue实现拖拽,经常使用到,所以自己封装了成了一个组件效果展示组件代码 <template><div class="dragBtn" @to ...
vue拖拽组件（app移动端）
vue拖拽组件 <template><div id="webId">< ...
vue拖拽组件，从此解放你的双手
一??vue拖拽.拖拽它来啦!它来啦! -机智如我一??? 特别简单 ,安装.注册.引用即可完成拖拽需求控制台一??打印拖拽信息一??? 一??1.npm安装 npm install awe- ...
VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性属性名称说明 group :gr ...
简单使用vue拖拽组件vue3-dnd
项目中需要使用到拖拽,这里使用vue3-dnd来满足需求这里项目使用的vue3(使用js而非ts) 插件官网地址:Vue3 DnD 安装 npm install vue3-dnd react-dnd ...
vue拖拽组件生成页面代码,vue可视化拖拽组件模板
怎么使用vuedraggable实现简单的拖拽,只拖拽一个内容(div) . 仔细观察发现,今日头条导航部分编辑效果,有以下几个效果1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)2:拖拽前选中效 ...
Vue 拖拽组件（实现上下拖拽） vuedraggable
fm: 首先 npm i -S vuedraggable 这样可以实现一列按钮之间可以进行上下拖拽重新排版 <template><vuedraggable v-model=&qu ...

自己封装的vue拖拽组件

自己封装的vue拖拽组件

自己封装的vue拖拽组件相关推荐

最新文章

热门文章