vue拖拽样式记录

拖拽通用样式记录

   <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>