[Vue.Draggable]拖拽后不占位置

July twelve

已于 2023-03-08 16:56:02 修改

阅读量782

点赞数

分类专栏： VUE 文章标签： vue.js

于 2023-03-08 16:28:16 首次发布

本文链接：https://blog.csdn.net/yys190418/article/details/129406265

版权

VUE 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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