1、需求: 可以在当前数组拖动,亦可拖动到其它数组, 如图:
2、最开始都是空数组,后来左边数组有数据,右边还是空数组,但是发现拖动无效
<div class="itemBox">
<div class="checkBox">
<div class="checkBox_top">
显示监测项
</div>
<div class="checkBox_bm">
<div class="title">监测项名称</div>
<div class="haveData">
<draggable v-model="showPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart" @add="handleAdd">
<transition-group>
<div class="item" v-for="item in showPostLableIdList" :key="item.id">{
{item.name}}</div>
</transition-group>
</draggable>
</div>
<!-- <a-empty v-else /> -->
</div>
</div>
<div class="noCheckBox">
<div class="noCheckBox_top checkBox_top">
隐藏监测项
</div>
<div class="checkBox_bm">
<div class="title">监测项名称</div>
<div class="haveData">
<draggable v-model="hiddenPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart1" @add="handleAdd1">
<transition-group>
<div class="item" v-for="item in hiddenPostLableIdList" :key="item.id" >{
{item.name}}</div>
</transition-group>
</draggable>
</div>
<!-- <a-empty v-else /> -->
</div>
</div>
</div>
3、中间还出现一个小插曲,就是想着没有空数组的时候显示空数据组件,然后也是没有效果的,后面看到 https://www.jianshu.com/p/770bbda1d9e4大佬写的这篇文章,要给 transition-group标签高度
4、注意要转成块级元素哦, 高度百分比也是无效的哟,完成代码:
<div class="itemBox">
<div class="checkBox">
<div class="checkBox_top">
显示监测项
</div>
<div class="checkBox_bm">
<div class="title">监测项名称</div>
<div class="haveData">
<draggable v-model="showPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart" @add="handleAdd">
<transition-group style="display: block;height: 1.5rem">
<div class="item" v-for="item in showPostLableIdList" :key="item.id">{
{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
<div class="noCheckBox">
<div class="noCheckBox_top checkBox_top">
隐藏监测项
</div>
<div class="checkBox_bm">
<div class="title">监测项名称</div>
<div class="haveData">
<draggable v-model="hiddenPostLableIdList" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="handleStart1" @add="handleAdd1">
<transition-group style="display: block;height: 1.5rem">
<div class="item" v-for="item in hiddenPostLableIdList" :key="item.id">{
{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</div>
// 拖拽
.itemBox {
display: flex;
margin-bottom: 16px;
.checkBox {
width: 50%;
.checkBox_top {
color: rgba(0, 0, 0, 0.85);
}
}
.noCheckBox {
flex: 1;
}
.checkBox_top {
padding: 0px 12px 6px 12px;
}
.checkBox_bm {
padding-bottom: 12px;
border: 1px solid #ccc;
.title {
padding: 6px 12px;
}
.haveData {
height: 1.5rem;
overflow-y: auto;
}
}
}
.ghostClass {
background-color: blue !important;
}
.chosenClass {
background-color: red !important;
opacity: 1 !important;
}
.dragClass {
background-color: blueviolet !important;
opacity: 1 !important;
box-shadow: none !important;
outline: none !important;
background-image: none !important;
}
.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;
}
2022年,做更好的自己!