本文主要是介绍vuedraggable插件 修改元素首次拖拽进入占位样式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
vuedraggable是一款适用于vue3 的可拖拽插件。
通过配置ghost-class=“ghost” 属性,可以对组件内元素拖拽过程中的占位符进行修改。但是无法根据ghost这一class对元素首次拖拽进组件内的占位元素进行样式修改
解决方法:元素首次拖拽进vuedraggable 中时的占位样式其实是由 ghost 下的被拖拽元素标签控制的,只需要修改ghost 下一级的被拖拽元素的标签样式即可
假如从当前拖拽区域之外的别的使用vuedraggable组件设置的拖拽区域中的元素最外层是p标签,则若想修改当前拖拽区域内元素首次拖拽进入的占位样式,就不能仅仅只根据ghost这一class属性去设置。而是要从全局样式文件中对ghost 下的被拖拽元素最外层标签,p标签,进行样式设置
// 该样式写进封装的拖拽组件内是不生效的,要在全局样式文件中写入才行
.ghost{>p{//修改首次拖拽进组件的占位样式}
}
这篇关于vuedraggable插件 修改元素首次拖拽进入占位样式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!