如何使用Vanilla JS实现select-option元素的拖拽功能

阿华AIGC实验室

2026-5-8

嘿，我完全懂你遇到的困扰——原生<select>里的<option>确实被浏览器限制了拖拽交互，根本触发不了拖拽事件。既然你必须用纯原生JS实现一个和原生select外观、功能都看齐，还支持拖拽的组件，我给你几个实用的可行方案，不用去逆向解析jQuery代码：

方案1：自定义HTML结构模拟原生Select + 原生拖拽API

这是最灵活可控的方案，完全自己构建UI，能1:1还原原生select的所有体验，同时实现拖拽排序。

具体步骤：

搭建自定义Select的DOM结构
用普通HTML元素模拟select的各个部分：

<div class="custom-select">
  <!-- 模拟select的触发框 -->
  <div class="select-trigger" tabindex="0">请选择选项</div>
  <!-- 模拟下拉菜单 -->
  <ul class="select-options" hidden>
    <li draggable="true" data-value="1">选项1</li>
    <li draggable="true" data-value="2">选项2</li>
    <li draggable="true" data-value="3">选项3</li>
  </ul>
  <!-- 隐藏input用于表单提交，和原生select行为一致 -->
  <input type="hidden" name="custom-select" class="select-hidden-input">
</div>

实现原生Select的核心功能
用JS补上原生select的基础交互：
- 点击触发框展开/收起下拉菜单
- 点击选项后更新触发框文本，同步隐藏input的值
- 支持键盘导航（上下箭头切换选项、回车确认、ESC关闭菜单）
- 点击页面其他区域自动关闭菜单

添加拖拽排序逻辑
用原生拖拽事件实现选项排序：

const optionsList = document.querySelector('.select-options');
let draggedItem = null;

// 拖拽开始时记录当前元素
optionsList.addEventListener('dragstart', (e) => {
  draggedItem = e.target;
  e.target.classList.add('dragging');
});

// 拖拽结束时清除状态
optionsList.addEventListener('dragend', (e) => {
  e.target.classList.remove('dragging');
  draggedItem = null;
});

// 拖拽过程中定位插入位置
optionsList.addEventListener('dragover', (e) => {
  e.preventDefault();
  const targetElement = getDragTarget(optionsList, e.clientY);
  if (targetElement) {
    optionsList.insertBefore(draggedItem, targetElement);
  } else {
    optionsList.appendChild(draggedItem);
  }
});

// 计算拖拽元素应该插入的位置
function getDragTarget(container, mouseY) {
  const draggableItems = [...container.querySelectorAll('li:not(.dragging)')];
  return draggableItems.reduce((closest, item) => {
    const rect = item.getBoundingClientRect();
    const offset = mouseY - rect.top - rect.height / 2;
    if (offset < 0 && offset > closest.offset) {
      return { offset, element: item };
    }
    return closest;
  }, { offset: -Infinity }).element;
}

用CSS还原原生Select样式
调整边框、圆角、下拉箭头、聚焦状态等样式，让自定义组件和原生select看起来一模一样，比如：

.custom-select {
  position: relative;
  width: 200px;
}
.select-trigger {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-trigger::after {
  content: '▼';
  font-size: 12px;
  margin-left: 8px;
}
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.select-options li {
  padding: 8px 12px;
  cursor: pointer;
}
.select-options li:hover, .select-options li.dragging {
  background-color: #f0f0f0;
}

方案2：基于`<datalist>`的轻量化改造（适合样式要求不高的场景）

如果你想尽量复用原生组件，可以用<input>配合<datalist>实现下拉选择，然后给<datalist>里的选项（或者模拟的选项元素）添加拖拽事件。不过这个方案的缺点是<datalist>的样式很难完全自定义，没法做到和原生select100%一致，适合对外观要求不那么严格的场景。