安装 npm install vuedraggable
html类型
<div class="itxst">
<div class="col" v-for="(v, i) in statData" :key="i">
<div class="col-title">{{ v.title }}</div>
<draggable
v-model="v.data"
group="site"
animation="100"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
:handle="'.defaultTypeTag'"
@start="onStart"
@end="onEnd(statData,v)"
>
<!--start开始,end结束-->
<transition-group :style="style">
<div
class="item defaultTypeTag"
v-for="item in v.data"
:key="item.id"
@dragend="startEnter({ father: v, son: item })"
>
<div class="item-title">
<span class="subject">{{ item.subject }}</span>
</div>
</div>
</transition-group>
</draggable>
</div>
</div>
js类型
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
drag: false,
//空数组之在的样式,设置了这个样式才能拖入高度必须和父级元素高度相等不然拖不进去
style: "height:559px;display: block;",
statData: [],
tableData: [
{ status:'01', subject: '张三', id: 1},
{ status:'02', subject: '李四', id: 2},
{ status:'04', subject: '王五', id: 3},
{ status:'05', subject: '四六', id: 4}
],
};
},
created() {
/**
* status状态:01-新建、02-进行中、03-已解决、04-测试中、05-已拒绝、06-已关闭
*/
let arr = JSON.parse(JSON.stringify(this.tableData));
let brr = [
{ status: "01", data: [], title: "新建" },
{ status: "02", data: [], title: "进行中" },
{ status: "03", data: [], title: "已解决" },
{ status: "04", data: [], title: "测试中" },
{ status: "05", data: [], title: "已拒绝" },
{ status: "06", data: [], title: "已关闭" },
];
brr.forEach((i) => {
arr.forEach((j) => {
if (j.status === i.status) {
i.data.push(j);
}
});
});
this.statData = brr;
},
methods: {
onStart() {
this.drag = true;
},
onEnd(e,v) {
this.drag = false;
},
startEnter(v) {
console.log(v)
},
},
};
</script>
css
<style>
.col-title {
padding: 10px;
border-bottom: solid 1px
margin-bottom: 10px;
font-weight: bold;
font-size: 15px;
}
.item-date {
color: var(--devui-danger,
font-size: 12px;
/* text-align: right; */
}
/*定义要拖拽元素的样式*/
.ghostClass {
/* background-color: blue !important; */
}
/* .chosenClass { */
/* opacity: 0;
transform: translateY(100%);
} */
.dragClass {
opacity: 1;
transition: all 0.3s;
}
.itxst {
}
.title {
padding: 6px 12px;
}
.col {
width: 253.4px;
height: 610px;
flex: 1;
border: solid 1px
border-radius: 5px;
float: left;
overflow-x: hidden;
overflow-y: auto;
}
.col::-webkit-scrollbar {
display: none;
}
.col + .col {
margin-left: 8.5px;
}
.item {
margin: 0px 10px 10px 10px;
height: auto;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item:hover {
cursor: move;
background-color: transparent;
box-shadow: 0 10px 20px
}
.item-conductor {
color:
}
.item-box {
width: 100%;
height: auto;
background-color:
border-left: 1px solid
border-bottom: 1px solid
border-right: 1px solid
box-sizing: border-box;
padding: 4px;
}
.item-title {
display: inline-block;
background-color:
width: 100%;
border: 1px solid
box-sizing: border-box;
padding: 4px;
border-radius: 7px 7px 0 0;
}
.item-tag {
float: right;
}
.item-title .subject {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
width: 165px;
}
.item-box p {
margin: 0;
margin-bottom: 10px;
font-size: 12px;
}
.item-box .degree {
margin-bottom: 20px;
}
</style>