原生JS鼠标事件模拟拖拽排序：兼容旧浏览器的实现思路

一、为什么放弃 HTML5 拖拽，选择原生鼠标事件模拟？

现代 Web 标准虽然提供了原生 HTML5 拖放接口（dragstart、dragover、drop 等），但在面对复杂交互或旧版兼容需求时，往往存在难以克服的工程局限：

• 旧版本浏览器兼容盲区： HTML5 拖拽规范在 Internet Explorer 9 及更早版本中支持度极其有限（IE8 完全不支持原生拖拽 API），且旧版 Trident 内核对事件触发序列的实现存在偏差。
• 幽灵镜像与视觉表现不可控： 原生拖放生成的半透明拖拽影子由操作系统或浏览器内核直接渲染，前端脚本无法通过 CSS 改变其透明度、旋转角、阴影或内部高亮细节。
• 平滑占位与过渡动画受限： 原生 dragover 事件触发频率由系统驱动，无法像鼠标事件那样精细控制每一帧的计算与 DOM 占位位移，容易引发列表元素的晃动与闪烁。

采用原生鼠标三事件（mousedown、mousemove、mouseup）进行自主模拟，开发者拥有 100% 的渲染控制权。通过在内存中克隆悬浮镜像、在 DOM 树中维护占位容器，可以完全摆脱平台限制，保证在老旧系统与现代环境中的行为一致性。

二、旧版浏览器的关键差异与事件垫片设计

要让原生鼠标事件在旧版浏览器中稳定运行，核心在于抹平 DOM Level 2 标准模型与旧版 IE 专属事件模型的差异。以下为核心差异点梳理：

1. 坐标归一化公式

标准浏览器支持直接读取 e.pageX 和 e.pageY。但在旧版 IE 中，必须基于 clientX 与 clientY 结合文档滚动量和根元素边框偏移进行计算：

function getPageX(e) {
  if (typeof e.pageX === 'number') {
    return e.pageX;
  }
  var doc = document.documentElement;
  var body = document.body;
  var scrollLeft = (doc && doc.scrollLeft) || (body && body.scrollLeft) || 0;
  var clientLeft = (doc && doc.clientLeft) || (body && body.clientLeft) || 0;
  return e.clientX + scrollLeft - clientLeft;
}

function getPageY(e) {
  if (typeof e.pageY === 'number') {
    return e.pageY;
  }
  var doc = document.documentElement;
  var body = document.body;
  var scrollTop = (doc && doc.scrollTop) || (body && body.scrollTop) || 0;
  var clientTop = (doc && doc.clientTop) || (body && body.clientTop) || 0;
  return e.clientY + scrollTop - clientTop;
}

2. 防止甩动脱手：setCapture 与 releaseCapture 的应用

在拖拽交互中，如果用户快速移动鼠标，光标极易移出被拖拽元素乃至浏览器视口边界，导致 mousemove 无法持续触发，出现“脱手卡死”现象。现代标准通常将 move 与 up 事件绑定在 document 上以扩大监听范围；而旧版 IE（IE5.5 ~ IE8）提供了更为底层的 element.setCapture() 方法，该方法能够将后续的所有鼠标输入直接截获到指定元素上，无论光标移动到屏幕的何处均不会丢帧。在 mouseup 完成时，必须调用 element.releaseCapture() 释放控制权。

三、拖拽排序的生命周期与四阶段实现步骤

拖拽重排的实现过程应被视作一个严密的状态机。整个过程划分为拾取锁定、位移追踪、中线碰撞和落位清理四个阶段：

步骤 1：拾取与锁定（mousedown）

当用户在目标列表项上按下鼠标时，执行以下准备工作：

1. 识别目标项： 通过事件代理或直接监听获取触发拖拽的列表项元素，记录其初始尺寸与在文档中的绝对坐标。
2. 计算相对偏移（Click Offset）： 计算鼠标按下点相对于元素左上角的距离：offsetX = pageX - item.offsetLeft，offsetY = pageY - item.offsetTop。这能确保拖拽开始后，鼠标光标与元素的相对抓取点保持固定，杜绝位移跳变。
3. 创建克隆镜像（Mirror）： 使用 cloneNode(true) 复制当前节点，设置 position: absolute; pointer-events: none; z-index: 9999; 并追加到 document.body，用于跟随鼠标。
4. 生成占位符（Placeholder）： 将原节点隐藏（或替换为具有相同宽高、边框为虚线的占位节点），保持列表原有的布局流不发生塌陷。
5. 启动事件监听与捕获： 若支持 setCapture 则对原元素调用锁定，同时向 document 挂载 mousemove 与 mouseup 回调。

步骤 2：位移追踪（mousemove）

鼠标移动时，持续获取当前的绝对坐标，并更新悬浮镜像的定位：

mirror.style.left = (pageX - offsetX) + 'px';
mirror.style.top = (pageY - offsetY) + 'px';

在追踪位移的同时，必须调用 e.preventDefault() 并清空系统文本选区，防止页面文本被意外划选遮挡视觉。

步骤 3：占位符动态重排（DOM 节点调整）

根据光标当前的 Y 轴坐标，实时检测其与当前容器内各兄弟节点的几何相对位置。一旦检测到光标跨过了某个兄弟节点的中线，立即调用原生的 container.insertBefore() 调整占位符的位置。

步骤 4：落位与清理（mouseup）

当用户松开鼠标，拖拽流程结束，执行结算与环境还原：

1. 将真实的原始节点插入到占位符当前所在的 DOM 槽位。
2. 自 DOM 树中移除占位符节点与悬浮镜像 mirror。
3. 解绑 document 上的 mousemove 与 mouseup 监听器。
4. 调用 releaseCapture() 释放全局输入捕获，避免后续正常点击事件被阻断。
5. 向业务层派发顺序更新通知。

四、几何中线碰撞算法与插槽判定

拖拽排序中最为关键的数学模型是插槽位置判定。若直接根据边界碰撞进行节点对调，会导致元素在临界点处发生疯狂的“位置颠簸（Jitter）”。解决方案是采用垂直几何中线二分判定法。

判定算法推导

对于列表容器中的任意一个非拖拽兄弟项 target，计算其垂直中线坐标：

var rectTop = target.offsetTop;
var rectHeight = target.offsetHeight;
var midY = rectTop + (rectHeight / 2);

当拖拽光标的 Y 轴坐标 mouseY 位于目标项的范围内时，依据中线二分逻辑进行排布：

• 前半区（mouseY < midY）： 光标位于目标项上半部分，说明用户期望将拖拽项插在目标项的前面。此时判断如果占位符尚未位于目标项之前，执行 container.insertBefore(placeholder, target)。
• 后半区（mouseY >= midY）： 光标位于目标项下半部分，说明用户期望插在目标项的后面。此时判断如果占位符尚未紧随目标项之后，执行 container.insertBefore(placeholder, target.nextSibling)。

五、完整代码实现与工程封装

以下是经过兼容性验证的完整原生 JavaScript 拖拽排序实现。该实现无需任何第三方库，向下兼容至 IE8：

// ==========================================
// 1. 兼容性事件与坐标辅助工具 (EventUtil)
// ==========================================
var EventUtil = {
  // 绑定事件（兼容 W3C 与 旧版 IE）
  addEvent: function(el, type, handler) {
    if (el.addEventListener) {
      el.addEventListener(type, handler, false);
    } else if (el.attachEvent) {
      // 封装代理以确保 handler 内部 this 指向当前元素
      var wrapper = function(e) {
        return handler.call(el, e || window.event);
      };
      el.attachEvent('on' + type, wrapper);
      // 存储句柄以便后续解绑
      if (!el._events) el._events = {};
      if (!el._events[type]) el._events[type] = [];
      el._events[type].push({ orig: handler, wrapped: wrapper });
    } else {
      el['on' + type] = handler;
    }
  },

  // 解绑事件
  removeEvent: function(el, type, handler) {
    if (el.removeEventListener) {
      el.removeEventListener(type, handler, false);
    } else if (el.detachEvent) {
      if (el._events && el._events[type]) {
        for (var i = 0; i < el._events[type].length; i++) {
          if (el._events[type][i].orig === handler) {
            el.detachEvent('on' + type, el._events[type][i].wrapped);
            el._events[type].splice(i, 1);
            break;
          }
        }
      }
    } else {
      el['on' + type] = null;
    }
  },

  // 阻止默认行为
  preventDefault: function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  },

  // 获取页面绝对 X 坐标
  getPageX: function(e) {
    if (typeof e.pageX === 'number') return e.pageX;
    var doc = document.documentElement, body = document.body;
    return e.clientX + ((doc && doc.scrollLeft) || (body && body.scrollLeft) || 0) - ((doc && doc.clientLeft) || 0);
  },

  // 获取页面绝对 Y 坐标
  getPageY: function(e) {
    if (typeof e.pageY === 'number') return e.pageY;
    var doc = document.documentElement, body = document.body;
    return e.clientY + ((doc && doc.scrollTop) || (body && body.scrollTop) || 0) - ((doc && doc.clientTop) || 0);
  }
};

// ==========================================
// 2. 拖拽排序管理器构造函数 (DragSortList)
// ==========================================
function DragSortList(container, options) {
  this.container = typeof container === 'string' ? document.getElementById(container) : container;
  this.itemSelector = (options && options.itemSelector) || 'li';
  this.onSortEnd = (options && options.onSortEnd) || function() {};

  this.activeItem = null;
  this.mirror = null;
  this.placeholder = null;
  this.offsetX = 0;
  this.offsetY = 0;

  this._bindStartEvents();
}

// 初始化 mousedown 监听
DragSortList.prototype._bindStartEvents = function() {
  var self = this;
  EventUtil.addEvent(this.container, 'mousedown', function(e) {
    var target = e.target || e.srcElement;
    // 向上寻找匹配的目标列表项
    while (target && target !== self.container) {
      if (target.tagName.toLowerCase() === self.itemSelector.toLowerCase()) {
        self._startDrag(target, e);
        EventUtil.preventDefault(e);
        break;
      }
      target = target.parentNode;
    }
  });
};

// 开始拖拽：构建镜像与占位符
DragSortList.prototype._startDrag = function(item, e) {
  var self = this;
  this.activeItem = item;

  var pageX = EventUtil.getPageX(e);
  var pageY = EventUtil.getPageY(e);

  // 计算光标在项内部的相对坐标
  var itemRect = this._getOffset(item);
  this.offsetX = pageX - itemRect.left;
  this.offsetY = pageY - itemRect.top;

  // 1. 创建绝对定位的镜像元素 (Mirror)
  this.mirror = item.cloneNode(true);
  this.mirror.style.position = 'absolute';
  this.mirror.style.width = item.offsetWidth + 'px';
  this.mirror.style.height = item.offsetHeight + 'px';
  this.mirror.style.left = itemRect.left + 'px';
  this.mirror.style.top = itemRect.top + 'px';
  this.mirror.style.zIndex = '9999';
  this.mirror.style.opacity = '0.9';
  this.mirror.style.filter = 'alpha(opacity=90)'; // 兼容旧 IE 透明度
  this.mirror.style.backgroundColor = '#f2f6fa';
  this.mirror.style.border = '1px dashed #345e82';
  document.body.appendChild(this.mirror);

  // 2. 创建占位符并插入列表对应位置
  this.placeholder = document.createElement(item.tagName);
  this.placeholder.className = 'drag-placeholder';
  this.placeholder.style.height = item.offsetHeight + 'px';
  this.placeholder.style.border = '1px dashed #ad8060';
  this.placeholder.style.backgroundColor = '#faf6f2';
  this.placeholder.style.listStyle = 'none';
  this.placeholder.style.margin = '4px 0';
  this.container.insertBefore(this.placeholder, item);

  // 隐藏真实原元素
  item.style.display = 'none';

  // 3. 启用鼠标输入捕获（针对 IE8 及更早版本）
  if (item.setCapture) {
    item.setCapture();
  }

  // 4. 挂载全局移动与抬起监听
  this._onMoveHandler = function(ev) { self._onDragMove(ev); };
  this._onUpHandler = function(ev) { self._onDragEnd(ev); };

  EventUtil.addEvent(document, 'mousemove', this._onMoveHandler);
  EventUtil.addEvent(document, 'mouseup', this._onUpHandler);

  // 监听窗口失焦，防止 Alt+Tab 或切屏导致脱手未释放
  this._onBlurHandler = function() { self._onDragEnd(); };
  EventUtil.addEvent(window, 'blur', this._onBlurHandler);
};

// 移动过程：坐标更新与中线重排
DragSortList.prototype._onDragMove = function(e) {
  if (!this.mirror) return;

  var pageX = EventUtil.getPageX(e);
  var pageY = EventUtil.getPageY(e);

  // 更新悬浮镜像坐标
  this.mirror.style.left = (pageX - this.offsetX) + 'px';
  this.mirror.style.top = (pageY - this.offsetY) + 'px';

  // 清除系统划词选区，防止文本高亮
  if (window.getSelection) {
    window.getSelection().removeAllRanges();
  } else if (document.selection) {
    document.selection.empty();
  }

  // 遍历兄弟子元素，根据几何中线进行插槽判断
  var children = this.container.children;
  for (var i = 0; i < children.length; i++) {
    var target = children[i];
    // 忽略占位符自身和被隐藏的原真实节点
    if (target === this.placeholder || target === this.activeItem) continue;

    var rect = this._getOffset(target);
    var targetHeight = target.offsetHeight;
    var targetTop = rect.top;
    var targetBottom = targetTop + targetHeight;

    // 检查鼠标是否进入目标项垂直区间
    if (pageY >= targetTop && pageY <= targetBottom) {
      var midY = targetTop + (targetHeight / 2);
      if (pageY < midY) {
        // 插入目标节点之前
        if (this.placeholder !== target.previousSibling) {
          this.container.insertBefore(this.placeholder, target);
        }
      } else {
        // 插入目标节点之后
        if (this.placeholder !== target.nextSibling) {
          this.container.insertBefore(this.placeholder, target.nextSibling);
        }
      }
      break;
    }
  }
};

// 释放结束：落位与内存释放
DragSortList.prototype._onDragEnd = function(e) {
  if (!this.activeItem) return;

  // 1. 将原元素恢复显示并放置在占位符的位置
  this.activeItem.style.display = '';
  this.container.insertBefore(this.activeItem, this.placeholder);

  // 2. 移除占位符与镜像
  if (this.placeholder && this.placeholder.parentNode) {
    this.placeholder.parentNode.removeChild(this.placeholder);
  }
  if (this.mirror && this.mirror.parentNode) {
    this.mirror.parentNode.removeChild(this.mirror);
  }

  // 3. 释放 IE 专属鼠标捕获
  if (this.activeItem.releaseCapture) {
    this.activeItem.releaseCapture();
  }

  // 4. 注销全局事件监听
  EventUtil.removeEvent(document, 'mousemove', this._onMoveHandler);
  EventUtil.removeEvent(document, 'mouseup', this._onUpHandler);
  EventUtil.removeEvent(window, 'blur', this._onBlurHandler);

  // 5. 触发外部回调
  this.onSortEnd(this.container);

  // 6. 重置状态
  this.activeItem = null;
  this.mirror = null;
  this.placeholder = null;
};

// 获取元素相对文档的绝对偏移（包含边框与滚动偏移）
DragSortList.prototype._getOffset = function(el) {
  var top = 0, left = 0;
  var current = el;
  while (current) {
    top += current.offsetTop;
    left += current.offsetLeft;
    current = current.offsetParent;
  }
  return { top: top, left: left };
};

六、边界异常处理与稳定性保障

将拖拽组件投入实际生产使用时，必须妥善处理以下偶发的边缘情况：

1. 文本划选与选区干扰抑制

拖拽过程中鼠标高速移动容易触发浏览器的原生文字选中机制，不仅破坏视觉体验，更会导致后续鼠标事件无法正常分发。防护方案包括两方面：

• CSS 声明： 对列表容器设置 user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none;。
• JS 动态清空： 在 mousemove 期间调用 document.selection ? document.selection.empty() : window.getSelection().removeAllRanges()。

2. 窗口失焦保护机制

如果用户在拖拽过程中使用 Alt + Tab 切换应用、按下 Esc 键，或鼠标移出浏览器窗体导致系统触发失焦，mouseup 事件可能永远不会被触发，造成克隆镜像悬浮在页面上的假死状态。为此，必须在 window 上挂载 blur 事件监听，一旦失焦立即强制执行 _onDragEnd() 释放资源并复位 DOM。

3. 长列表边缘自动滚屏支持

当可排序列表超出视口高度或处于带滚动条的定高容器中时，如果用户拖拽项接近容器顶部或底部边缘，应自动推进行滚动。可以通过在 mousemove 中检测光标距离视口边界的阈值（如小于 30px 时）：

var edgeThreshold = 30;
var scrollSpeed = 8;
if (e.clientY < edgeThreshold) {
  window.scrollBy(0, -scrollSpeed);
} else if (window.innerHeight - e.clientY < edgeThreshold) {
  window.scrollBy(0, scrollSpeed);
}

七、运行验证与故障排查指南

实现完成后，建议在开发与测试环境中按照以下步骤进行完整性验收：

1. IE 兼容模式验证： 打开 Internet Explorer 或在现代浏览器的“IE 兼容性模式”中打开页面，切换至 IE8 文档模式，观察拖拽抓取、位移和松手时控制台是否出现 attachEvent、window.event 相关的语法错误。
2. 甩动脱手测试： 快速将列表项拖出浏览器窗口边缘后松开鼠标，再将光标移回视口，检查镜像元素是否正确销毁，确认没有残留的浮动 DOM。
3. DOM 顺序一致性检查： 连续拖拽重排多个项后，通过开发者工具审查 DOM 树结构，确认实际节点索引与界面展示顺序完全吻合，避免占位符未清理或节点引用丢失的问题。