嘿，这需求我刚折腾过，用原生JS完全能搞定，不用依赖任何库。下面是完整的实现方案，从HTML结构到JS逻辑都给你理清楚：

核心思路 #

要实现这个功能，关键要处理好几个拖拽事件，同时动态管理放置区域：

• 给每个列表项开启拖拽能力
• 拖拽开始时记录当前元素
• 拖拽经过元素时，在其下方显示一个高亮的放置占位区
• 拖拽离开时移除占位区
• 放置时把拖拽元素插入到占位区的位置，再清理占位区

完整代码实现 #

HTML结构 #

先搭一个基础的可拖拽列表：

<ul id="sortable-list">
  <li draggable="true" class="list-item">列表项 1</li>
  <li draggable="true" class="list-item">列表项 2</li>
  <li draggable="true" class="list-item">列表项 3</li>
  <li draggable="true" class="list-item">列表项 4</li>
  <li draggable="true" class="list-item">列表项 5</li>
</ul>

CSS样式 #

给列表项和放置占位区加样式，让交互更直观：

#sortable-list {
  list-style: none;
  padding: 0;
  width: 300px;
  margin: 20px auto;
}

.list-item {
  padding: 12px;
  margin: 8px 0;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: grab;
  transition: background 0.2s;
}

.list-item:active {
  cursor: grabbing;
}

.drop-zone {
  height: 4px;
  background: #2196F3;
  margin: 8px 0;
  border-radius: 2px;
}

JavaScript逻辑 #

这部分是核心，处理所有拖拽事件：

const sortableList = document.getElementById('sortable-list');
let draggedItem = null;
let dropZone = null;

// 创建放置区域元素
function createDropZone() {
  const zone = document.createElement('div');
  zone.className = 'drop-zone';
  return zone;
}

// 拖拽开始事件
sortableList.addEventListener('dragstart', (e) => {
  draggedItem = e.target;
  // 给拖拽元素加个半透明效果，提示正在拖拽
  draggedItem.style.opacity = '0.5';
});

// 拖拽结束事件（清理状态）
sortableList.addEventListener('dragend', (e) => {
  draggedItem.style.opacity = '1';
  draggedItem = null;
  // 如果还有残留的放置区域，移除它
  if (dropZone) {
    dropZone.remove();
    dropZone = null;
  }
});

// 拖拽经过事件
sortableList.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须阻止默认行为，否则无法触发drop事件
  
  const targetItem = e.target.closest('.list-item');
  if (!targetItem || targetItem === draggedItem) return;

  // 如果已有放置区域，先移除
  if (dropZone) {
    dropZone.remove();
  }
  
  // 创建新的放置区域，插入到当前元素下方
  dropZone = createDropZone();
  targetItem.after(dropZone);
});

// 拖拽离开列表时清理放置区域
sortableList.addEventListener('dragleave', (e) => {
  // 只有当鼠标完全离开列表区域时才移除
  if (!sortableList.contains(e.relatedTarget) && dropZone) {
    dropZone.remove();
    dropZone = null;
  }
});

// 放置事件（完成元素排序）
sortableList.addEventListener('drop', (e) => {
  e.preventDefault();
  
  if (dropZone && draggedItem) {
    // 将拖拽元素插入到放置区域的位置
    dropZone.before(draggedItem);
    // 移除放置区域
    dropZone.remove();
    dropZone = null;
  }
});

关键细节说明 #

• draggable="true"：必须给列表项添加这个属性，才能开启原生拖拽能力
• 阻止dragover默认行为：浏览器默认不允许在元素上放置内容，所以必须调用e.preventDefault()才能触发drop事件
• 动态放置区域：通过after()方法插入到当前经过的元素下方，拖拽离开或放置后及时移除，避免残留
• closest('.list-item')：确保即使鼠标划过列表项内的子元素，也能正确定位到对应的列表项

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