中文文档地址:
vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html1.安装
npm i -S vuedraggable
2.引入
import draggable from 'vuedraggable'
3.使用文章来源:https://www.toymoban.com/news/detail-627541.html
:key="keyDate" 改变 listBak时,刷新图表显示文章来源地址https://www.toymoban.com/news/detail-627541.html
<template>
<div>
<!-- 调用组件 -->
<el-row :gutter="20">
<el-col :span="4">
<el-row style="background-color: #55ff7f">
<draggable v-model="list" :group="groupA" class="dragBox" animation="100" @end="refreshKay">
<div v-for="(item, index) in list" :key="index" class="show-li">{{ item.name }}</div>
</draggable>
</el-row>
</el-col>
<el-col :span="12" :key="keyDate">
<el-row style="background-color: #55ff7f">
<draggable v-model="listBak" :group="groupB" animation="100" class="dragBox" @end="refreshKay">
<el-col v-for="(item, index) in listBak" :key="index" :span="item.width">
<div @click="showTest(item)">
<component :is="item.id" v-if="listComponents.includes(item.id)"></component>
</div>
</el-col>
</draggable>
</el-row>
'查看顺序:' {{listBak}}
</el-col>
<el-col :span="8">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="名称">
<el-input disabled v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="宽度">
<el-input v-model="form.width"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="updateTest">立即更新</el-button>
<el-button type="primary" @click="delTest">删除</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
// 引入拖拽组件
import draggable from 'vuedraggable'
export default {
name: 'index',
components: {
// 注册draggable组件
draggable,
China: () => import('@/view/echarts/map/China'),
Shandong: () => import('@/view/echarts/map/Shandong')
},
data() {
return {
listComponents: ['Shandong', 'China'],
listBak: [],
form: {
id: '',
name: '',
width: 0
},
keyDate: 'T',
list: [
{
id: 'China',
name: '中国',
width: 24
},
{
id: 'Shandong',
name: '山东',
width: 24
}
],
groupA: {
name: 'test',
pull: true, // 可以拖出
put: false // 可以拖入
},
groupB: {
name: 'test',
pull: false,
put: true
}
}
},
methods: {
showTest(param) {
this.form = JSON.parse(JSON.stringify(param))
},
updateTest() {
this.listBak.forEach(i => {
if (i.id === this.form.id) {
i.width = this.form.width
}
})
this.refreshKay()
},
delTest() {
// 获取元素在数组的位置
let num = -1
for (let i = 0; i < this.listBak.length; i++) {
let item = this.listBak[i]
if (item.id === this.form.id) {
num = i
}
}
// 删除元素
if (num !== -1) {
this.list.unshift(this.form)// 加回原数组
this.listBak.splice(num, 1)// 从当前数组删除
}
this.refreshKay()
},
refreshKay() { // 刷新整体页面
this.keyDate = 'T' + new Date()
}
}
}
</script>
<style scoped>
.dragBox {
padding: 20px;
min-height: 300px;
}
.show-li {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
.show-li:hover {
background-color: #f1f1f1;
cursor: move;
}
</style>
到了这里,关于vue的拖拽插件: vue.draggable的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!