vuedraggable是一款适用于vue3 的可拖拽插件。
通过配置ghost-class=“ghost” 属性,可以对组件内元素拖拽过程中的占位符进行修改。但是无法根据ghost这一class对元素首次拖拽进组件内的占位元素进行样式修改
解决方法:元素首次拖拽进vuedraggable 中时的占位样式其实是由 ghost 下的被拖拽元素标签控制的,只需要修改ghost 下一级的被拖拽元素的标签样式即可
假如从当前拖拽区域之外的别的使用vuedraggable组件设置的拖拽区域中的元素最外层是p标签,则若想修改当前拖拽区域内元素首次拖拽进入的占位样式,就不能仅仅只根据ghost这一class属性去设置。而是要从全局样式文件中对ghost 下的被拖拽元素最外层标签,p标签,进行样式设置
// 该样式写进封装的拖拽组件内是不生效的,要在全局样式文件中写入才行
.ghost{
>p{
//修改首次拖拽进组件的占位样式
}
}