如何修复Chromium浏览器RTL页面中拖拽光标错位问题？

在Chromium内核浏览器的RTL（从右到左）页面中，设置draggable="true"的元素被拖拽时，拖拽预览会明显偏离光标位置，无法对齐到光标正下方：

问题核心 #

Chromium默认从元素左侧计算拖拽预览的偏移坐标，但RTL布局下元素的交互逻辑应以右侧为原点，这一适配缺失导致了预览位置的错位。

复现代码 #

<p draggable="true" dir="rtl">snippet</p>

解决方案 #

通过监听dragstart事件，利用DataTransfer.setDragImage()方法手动修正拖拽预览的偏移量，让预览图对齐光标位置：

实现代码 #

<p draggable="true" dir="rtl" id="dragElement">snippet</p>

<script>
document.getElementById('dragElement').addEventListener('dragstart', (e) => {
  const elementRect = e.target.getBoundingClientRect();
  // 计算光标到元素右侧的水平偏移，作为拖拽预览的X轴偏移量
  const offsetX = elementRect.right - e.clientX;
  // 计算光标到元素顶部的垂直偏移，作为拖拽预览的Y轴偏移量
  const offsetY = e.clientY - elementRect.top;
  
  // 重新设置拖拽预览图的位置，让光标对齐预览图的对应点
  e.dataTransfer.setDragImage(e.target, offsetX, offsetY);
});
</script>

原理说明 #

该方法通过计算光标在RTL元素内的相对位置，将拖拽预览的定位原点从元素左侧改为光标实际点击的位置，完美适配RTL布局的交互逻辑，解决偏移问题。

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