在网上找了很多资源和介绍,最后发现一个插件（vue-slicksort）挺好用的，所以就拿来练练,出个效果
具体参考地址: https://github.com/Jexordexan/vue-slicksort
< 此文章简单的学习了基础用法，下个文章会有对此插件更深的应用 >
效果图
tuozhuai.gif
参数图：
drag.jpg
首先:
npm install --s vue-slicksort
代码如下
<已经写好的demo,可以直接拿来用，我就不那么多废话了>
<template>
<div class="overall">
<!-- 拖拽 -->
<SlickList
:lockToContainerEdges="true"
axis="x"
lockAxis="x"
v-model="items"
class="SortableList"
@input="getChangeLists"
>
<SlickItem v-for="(item, index) in items" class="SortableItem" :index="index" :key="index">
<div class="title">{{ item.name }}</div>
<SlickList :lockToContainerEdges="true" class="list" lockAxis="y" v-model="item.itemArr" @input="getChangeList">
<SlickItem
class="list-item"
v-for="(item, index) in item.itemArr"
:index="index"
:key="index"
>{{ item }}</SlickItem>
</SlickList>
</SlickItem>
</SlickList>
</div>
</template>
<script>
// 安装 npm install --save vue-slicksort
import { SlickList, SlickItem } from "vue-slicksort";
export default {
components: {
SlickItem,
SlickList
},
data() {
return {
flag: true,
items: [
{
name: "Tab-1",
itemArr: ["1-1", "1-2", "1-3"]
},
{
name: "Tab-2",
itemArr: ["2-1", "2-2", "2-3"]
},
{
name: "Tab-3",
itemArr: ["3-1", "3-2", "3-3"]
}
]
};
},
methods: {
getChangeList(val) {
console.log(val, "二级");
},
getChangeLists(vals) {
// 拖拽完成后返回被打乱后的顺序
console.log(vals, "一级");
}
}
};
</script>
<style lang="scss" scoped>
.list {
width: 100%;
max-height: 80vh;
margin: 0 auto;
padding: 0;
overflow: auto;
background-color: #f3f3f3;
}
.list-item {
width: 100%;
// padding: 20px;
background-color: #fff;
box-sizing: border-box;
color: #333;
font-weight: 400;
text-align: center;
padding: 20px;
box-shadow: 0 1px 2px #ccc;
}
.SortableList {
display: flex;
width: 600px;
max-height: 90vh;
margin: 0 auto;
background-color: #dfdbdb;
}
.SortableItem {
text-align: center;
width: 100%;
background-color: #fff;
box-sizing: border-box;
user-select: none; //不允许用户选中文字
color: #333;
font-weight: 400;
position: relative;
box-shadow: 0 1px 2px #ccc;
.title{
height: 50px;
width: 100%;
background: rgba(11, 145, 71, 0.658);
color: white;
font-weight: bold;
line-height: 50px;
}
}
</style>
喜欢的给个赞啊 !
问题归纳：
1.在设置 position:fixed 时，会遇到拖拽标签时，标签消失问题。
//给拖拽的标签设置
position: relative;
z-index: 999; //这个值需要大于 position:fixed 设置的数值才能显示
2.如果拖拽标签上有操作按钮，但是点击操作按钮却不执行
//需要设置distance 属性，在拖拽一定距离时再去识别
:distance="10"
3.样式问题，在scss中尽量还是这样写，不要嵌套里面写，否则会有问题
. SortableList{
-------
}
. SortableItem{
-------
}
