- 可通过css相互叠加的方式,隐藏拖拽后的默认插入位置效果
其中,
.left_item
是被拖拽的容器的class,.step_card
是拖拽的某项的class
.left_item .step_card {
display: none;
}
- 通过css
+
加号选择器,实现拖入有变色效果
其中
.step_card
是拖拽的元素class,.left_item_box
是被拖拽的容器class
.step_card + .left_item_box {
background-color: greenyellow;
}
<draggable
v-for="(item, i) in auditorList"
:key="item.id"
class="left_item"
:class="{ left_item_sel: item.visible }"
:group="groupLeft"
@add="add"
@click="openAuditor(item)"
>
<div class="left_item_box">
<div class="left_item_1">
<div class="left_item_1_1">
<span class="span_2"> {
{ getTitle1(item, i) }} </span>
</div>
<div class="left_item_1_2">
<span class="span_3">
{
{ "分配人数:" + item.users.length }}
</span>
</div>
</div>
<div class="left_item_2">
<span class="span_4">
{
{ "所属:" + item.department }}
</span>
</div>
</div>
</draggable>