• 可通过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>

更多推荐