vue拖拽样式记录

最新推荐文章于 2024-06-19 20:53:45 发布

土生土长的IU

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量415

点赞数 1

分类专栏： Vue 3.0 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/134379845

版权

Vue 3.0 专栏收录该内容

97 篇文章 1 订阅

订阅专栏

拖拽通用样式记录

   <draggable
      :list="fields"
      :animation="300"
      :delay="10"
      :force-fallback="true"
      drag-class="dragClass"
      fallback-class="fallbackClass"
      chosen-class="chosenClass"
      ghost-class="ghostClass"
      class="flex flex-1 w-full"
    ></draggable>

<style scoped>
.drag-icon,
.delete-icon {
  cursor: pointer;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.drag-icon {
  background-image: url('./images/drag-icon.png');
  background-size: 100% 100%;
}

.delete-icon {
  background-image: url('./images/close.png');
  background-size: 100% 100%;
}

/* 拖动排序样式 */
.dragClass {
  opacity: 1;
}

.fallbackClass {
  opacity: 1;
}

.chosenClass {
  opacity: 0.96 !important;
}

.ghostClass {
  opacity: 0.7 !important;
}
</style>