Chrome下如何为任意网页文本框启用不受站点限制的文本拖拽重排功能

完全可以实现不受目标网站原生功能限制的全局文本框拖拽重排能力。多数网站禁用文本拖拽的本质，要么是强制把编辑元素的draggable属性设为false，要么是在全局/元素级的拖拽事件里加了preventDefault拦截，把浏览器原生的文本拖拽逻辑给掐了，这些限制都可以通过技术手段绕开。

1. 临时应急的控制台调试方案 #

遇到单网站临时需要拖拽重排时，不需要额外装工具，直接打开Chrome开发者工具的控制台，跑几行简单的JS就能立刻生效：

// 选中页面所有可编辑文本元素
document.querySelectorAll(
  'textarea, input:not([type]), input[type="text"], [contenteditable="true"]'
).forEach(editEl => {
  // 打开元素本身的可拖拽开关
  editEl.draggable = true;
  // 清空元素上绑定的拖拽拦截事件，恢复浏览器原生逻辑
  editEl.ondragstart = null;
  editEl.ondragover = null;
  editEl.ondrop = null;
})

这个方法的缺点是刷新页面就会失效，适合临时单页使用。

2. 持久化全局生效的扩展实现 #

如果需要长期在所有网页上生效，最稳妥的方式是写一个极简的Chrome扩展，通过内容脚本在每个页面加载完成后自动执行上面的修复逻辑，还可以通过更高权限的API绕开网站的主动拦截：

• 扩展的内容脚本运行在浏览器隔离的执行环境，拥有比页面自身JS更高的执行优先级，可以在网站的拦截逻辑运行前，就覆盖掉它绑定的拖拽阻断事件
• 不需要完全依赖浏览器原生的拖拽逻辑，可以自己实现一套适配层：监听用户选中文本后的鼠标拖拽动作，自动计算拖拽落点的文本光标位置，完成原位置文本移除、新位置文本插入的全流程，哪怕网站把原生拖拽的所有事件都禁了，这套自研逻辑也能正常跑
• 可以做精准匹配，只给真正的可编辑文本元素解锁拖拽能力，不会干扰网页本身的卡片拖拽、图片拖拽等正常功能

3. 零开发成本的用户脚本方案 #

如果不想自己打扩展包，可以用现成的用户脚本管理器，写几十行的适配脚本实现同样的效果——本质逻辑和Chrome扩展完全一致，只是不需要走扩展的上架、打包流程，脚本加载后会自动在所有匹配的网页上运行，自动给所有文本框解锁拖拽重排能力。

• 不要只改draggable属性就觉得完事，90%的网站禁文本拖拽根本不是改属性，而是靠事件拦截实现的，光开属性开关不做事件清理，功能还是不会生效
• 遇到富文本编辑器类的编辑区（比如后台内容编辑器、在线文档），不能直接套用纯文本input/textarea的计算逻辑，需要递归遍历编辑区的DOM文本节点，准确计算拖拽落点的光标位置，不然会出现文本插入位置错位的问题
• 不要无差别给页面所有元素开可拖拽开关，会搞乱网页本身的交互逻辑，一定要限定作用范围在可编辑的文本元素上

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