Quill编辑器拖拽事件失效：v1.3.7可用v2.0.0-beta系列版本不可用

Quill 2.0 beta系列重构了拖拽系统，原生dragstart/dragover/drop等事件会被编辑器内部拦截，导致自定义监听器失效。以下是几种可行的解决方式：

1. 利用Quill 2.0内置的拖拽钩子 #

2.0版本新增了拖拽相关的配置钩子，替代原生事件监听。初始化编辑器时配置dragAndDrop模块：

const quill = new Quill('#editor', {
  modules: {
    dragAndDrop: {
      handleDragStart(event) {
        // 自定义拖拽开始逻辑
        console.log('拖拽开始');
        // 可在这里记录选中的内容或位置
      },
      handleDragOver(event) {
        // 阻止默认行为以允许放置
        event.preventDefault();
        // 自定义悬浮时的UI反馈
      },
      handleDrop(event) {
        event.preventDefault();
        // 处理内容移动逻辑
        const targetRange = quill.getSelection();
        // 结合之前记录的拖拽内容，完成移动操作
      }
    }
  }
});

2. 监听容器的捕获阶段事件 #

通过在编辑器容器上添加捕获阶段的事件监听器，绕过Quill的事件拦截：

const editorEl = document.getElementById('editor');
editorEl.addEventListener('dragstart', (e) => {
  // 自定义拖拽逻辑
  console.log('捕获到dragstart事件');
}, true); // 第三个参数设为true，确保在Quill处理前触发

注意：这种方式需要手动同步Quill的内部状态，避免和编辑器自带的拖拽逻辑冲突。

3. 临时回退到稳定版 #

如果不需要2.x的新特性，暂时使用Quill 1.3.7可以快速恢复原有拖拽功能，等待2.x正式版完善拖拽事件支持。

内容的提问来源于stack exchange，提问作者Rahul Kumar Lodhi