可拖拽元素悬停时在DOM元素前添加中间占位虚线的实现咨询

核心思路 #

利用CSS伪元素结合绝对定位，将虚线精准定位在相邻元素的间隙中间，配合拖拽事件触发的状态类控制虚线的显示与隐藏。

代码实现 #

HTML结构（以横向可拖拽列表为例） #

<ul class="drag-list">
  <li draggable="true" class="drag-item">元素1</li>
  <li draggable="true" class="drag-item">元素2</li>
  <li draggable="true" class="drag-item">元素3</li>
</ul>

CSS样式 #

.drag-list {
  display: flex;
  gap: 20px; /* 控制元素间的间隙大小 */
  list-style: none;
  padding: 0;
}

.drag-item {
  position: relative;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: grab;
}

/* 拖拽悬停时显示的中间虚线 */
.drag-item.drag-over::before {
  content: '';
  position: absolute;
  left: -10px; /* 向左偏移间隙的一半，刚好落在中间位置 */
  top: 0;
  height: 100%;
  width: 1px;
  border-left: 2px dashed #ff4444; /* 自定义虚线的样式、颜色 */
}

JS处理拖拽事件 #

const dragItems = document.querySelectorAll('.drag-item');

dragItems.forEach(item => {
  // 拖拽开始标记
  item.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', item.textContent);
    item.classList.add('dragging');
  });

  // 拖拽结束清除状态
  item.addEventListener('dragend', () => {
    item.classList.remove('dragging');
    dragItems.forEach(i => i.classList.remove('drag-over'));
  });

  // 悬停时添加显示虚线的类
  item.addEventListener('dragover', (e) => {
    e.preventDefault();
    dragItems.forEach(i => i.classList.remove('drag-over'));
    item.classList.add('drag-over');
  });
});

细节调整说明 #

• 如果是纵向排列的列表，只需修改布局为flex-direction: column，并将伪元素样式改为：top: -10px、width: 100%、border-top: 2px dashed #ff4444，即可实现纵向元素间的中间虚线。
• 若需要更自定义的虚线样式，可替换border-left为background-image: linear-gradient(to bottom, #ff4444 50%, transparent 50%)，再配合background-size控制虚线的间距。

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