使用Dragula实现图片可排序列表时拖动显示项目符号问题

当用Dragula做图片可排序列表时，拖动元素出现项目符号是因为Dragula会生成一个带.gu-mirror类的镜像元素，这个元素不会继承你给原始ul设置的list-style-type: none样式。

你只需要在CSS里补充针对Dragula相关元素的样式规则就能解决：

/* 保持原始列表的无项目符号样式 */
ul {
    list-style-type: none;
    padding-left: 0; /* 可选：移除默认内边距优化排版 */
}

/* 强制隐藏拖动镜像元素的项目符号 */
.gu-mirror {
    list-style-type: none !important;
}

/* 可选：处理过渡状态的元素，防止出现意外样式 */
.gu-transit {
    list-style-type: none !important;
}

关键说明 #

• .gu-mirror是Dragula拖动时生成的镜像元素专属类，必须单独设置样式才能覆盖默认的列表项样式。
• 加!important是为了确保该样式优先级高于Dragula自带的样式，避免被覆盖。
• 添加padding-left: 0可以移除浏览器默认给ul添加的左内边距，让图片列表的排版更紧凑整齐。

内容的提问来源于stack exchange，提问作者Eolo