jQuery UI Sortable中列表项为何会重叠底部边框？

嘿，这个拖拽时的边框重叠问题我之前也碰到过，大概率真的和你怀疑的placeholder样式脱不了干系！咱们来一步步拆解可能的原因和解决办法：

可能的原因 #

• Placeholder与列表项的边框/边距冲突：如果你的列表项设置了底部边框（比如border-bottom: 1px solid #ddd），而拖拽生成的placeholder没有针对性调整样式——比如也带了边框，或者默认的外边距和列表项不一致——就会导致下移的原列表项边框和placeholder（或者相邻元素）的边框挤在一起，出现重叠效果。
• 拖拽时的元素定位偏移：很多拖拽库在拖拽过程中会给元素添加临时定位属性（比如position: relative），或者修改元素的margin/padding，如果placeholder的高度计算和真实列表项有偏差，就会让原列表项的位置发生细微偏移，最终导致边框重叠。
• 盒模型计算不一致：如果列表项用了默认的box-sizing: content-box，而placeholder用了border-box（或者反过来），两者的高度计算逻辑不同，会造成布局错位，进而引发边框重叠。

针对性解决方案 #

1. 精准控制Placeholder的样式
   给placeholder单独设置样式，确保它和列表项的边框、边距完全协调。比如列表项有底部边框，就给placeholder去掉底部边框，同时保持一致的外边距：

   .drag-placeholder {
     border: 1px dashed #ccc; /* 用虚线区分占位符，避免和真实元素边框混淆 */
     border-bottom: none; /* 去掉底部边框，避免和下方列表项重叠 */
     margin: 4px 0; /* 和列表项的margin保持一致 */
     box-sizing: border-box;
   }
   

2. 统一所有元素的盒模型
   给列表容器内的所有元素（包括列表项和placeholder）统一设置box-sizing: border-box，这样元素的padding和border都会被计入总高度，避免高度计算偏差：

   .list-container li, .drag-placeholder {
     box-sizing: border-box;
     height: 48px; /* 固定高度也能减少布局波动 */
   }
   

3. 检查拖拽库的配置项
   如果你用的是第三方拖拽库（比如SortableJS、React DnD这类），通常会有专门控制placeholder样式的配置，比如SortableJS里的placeholderClass，可以直接指定自定义的CSS类，避免库默认样式带来的冲突：

   const sortable = new Sortable(listEl, {
     placeholderClass: 'drag-placeholder', // 用自定义类控制占位符样式
     // 其他配置...
   });
   

你可以先从排查placeholder的CSS样式入手，重点看边框、边距和盒模型这几个点，应该很快就能解决这个视觉小问题啦！

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