拖拽通用样式记录
html
<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>
css
<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>