如何阻止contenteditable元素中文本拖拽且保留编辑与选中功能？

要实现这个需求其实很简单，核心就是阻止文本拖拽的起始事件，同时不影响元素的可编辑和选中能力。

具体实现思路 #

我们只需要给目标contenteditable元素绑定dragstart事件监听器，在事件触发时阻止浏览器的默认行为即可。因为拖拽操作是从dragstart事件开始的，阻止它就直接禁用了文本拖拽功能，而contenteditable属性保持为true，所以编辑和选中功能完全不受影响。

代码示例 #

HTML

<a href="#" contenteditable id="editableText">Select some of this text, then drag and drop it around.</a>

JavaScript

const editableEl = document.getElementById('editableText');

editableEl.addEventListener('dragstart', (event) => {
  // 阻止默认拖拽行为
  event.preventDefault();
});

批量处理多个元素（事件委托） #

如果你页面上有多个contenteditable元素需要处理，可以用事件委托的方式，避免逐个绑定事件：

document.addEventListener('dragstart', (event) => {
  // 判断触发事件的元素是否是可编辑的
  if (event.target.isContentEditable) {
    event.preventDefault();
  }
});

方案说明 #

• dragstart事件在用户开始拖拽选中内容时触发，调用preventDefault()会直接取消浏览器默认的文本拖拽逻辑。
• 我们没有修改contenteditable属性，也没有干扰任何与文本选中、编辑相关的事件（比如selectstart、input等），所以元素的原有功能完全保留。

这个方案在Chrome、Firefox、Edge等主流浏览器中都能稳定工作，没有兼容性问题。

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