JavaScript拖拽库可取消事件的更优实现方式咨询

我正在开发一个拖拽（drag-n-drop）库，想给用户提供可自定义的钩子事件。比如在元素拖放到目标元素前，会触发一个带详情数据的beforeDrop事件，允许用户通过自定义处理逻辑根据数据阻止拖放。但如果用户没注册这个事件的处理程序，当前的实现会导致拖放无法执行——所以库需要一个默认逻辑，在用户未及时响应时自动允许拖放。

目前的实现能正常工作，但写法比较繁琐（尤其是超时时间的选择很尴尬），想知道有没有更优雅的实现方式？

现有代码如下：

库内事件监听逻辑 #

document.addEventListener('beforeDrop', (e) => {
        setTimeout(function() {   
             if (e.defaultPrevented) {
                Draggable.log('Draggable: client prevented drop');
                Draggable.dropAllowed = false;
              }
              else {
                Draggable.log('Draggable: drop allowed');
                Draggable.dropAllowed = true;
              }
        }, 50);
    })

库内触发拖放检测的逻辑 #

this.addEvent('beforeDrop',this.el,droppedOnElement.el);
let clientResponse = new Promise(function(resolve) {
       setTimeout(function() {resolve();}, 100);
    });

await clientResponse;

if (Draggable.dropAllowed) {
      // 执行实际的拖放操作......
}

事件创建与分发方法 #

addEvent(name, from, to) {
    const event = new CustomEvent(name, { cancelable: true, detail: {from:from.dataset, to:to.dataset}});
    document.dispatchEvent(event);
}

用户侧的事件处理示例 #

document.addEventListener('beforeDrop', (e) => {

  if (drop(e.detail.from, e.detail.to) === false) {
    // 阻止库执行拖放
    e.preventDefault();
  }
}, false);

你的当前实现确实存在冗余和超时时间难以把控的问题，这里提供一套更简洁、灵活的优化方案，核心是去掉全局变量依赖，用Promise直接封装事件的处理结果：

1. 改造事件分发逻辑，返回Promise #

把addEvent改造成返回Promise的方法，同步处理用户的同步逻辑，同时支持异步校验场景：

addEvent(name, from, to) {
  return new Promise((resolve) => {
    const event = new CustomEvent(name, { 
      cancelable: true, 
      detail: { 
        from: from.dataset, 
        to: to.dataset,
        // 给用户提供异步回调，支持异步校验后告知结果
        resolve: (allowDrop) => {
          clearTimeout(event.timeoutId);
          resolve(allowDrop !== false);
        }
      }
    });
    
    // 同步触发事件，先处理所有用户的同步逻辑
    const isPrevented = !document.dispatchEvent(event);
    
    // 如果用户同步调用了preventDefault，直接返回阻止结果
    if (isPrevented) {
      Draggable.log('Draggable: client prevented drop synchronously');
      resolve(false);
      return;
    }
    
    // 设置超时，用户未主动响应时默认允许拖放
    // 超时时间可根据需求调整，比如100ms足够覆盖绝大多数同步逻辑
    event.timeoutId = setTimeout(() => {
      Draggable.log('Draggable: no client response, allowing drop');
      resolve(true);
    }, 100);
  });
}

2. 库内触发拖放的逻辑简化 #

现在不需要全局变量和额外的超时，直接await事件Promise的结果即可：

const allowDrop = await this.addEvent('beforeDrop', this.el, droppedOnElement.el);

if (allowDrop) {
  // 执行实际的拖放操作......
}

3. 用户侧的处理逻辑（同步/异步都支持） #

• 同步处理（兼容原逻辑）：
  用户原来的代码不需要修改，依然可以通过e.preventDefault()阻止拖放：

document.addEventListener('beforeDrop', (e) => {
  if (drop(e.detail.from, e.detail.to) === false) {
    e.preventDefault();
  }
}, false);

• 异步处理（新增支持）：
  如果用户需要做异步校验（比如请求后端接口），可以调用事件详情里的resolve方法返回结果：

document.addEventListener('beforeDrop', async (e) => {
  // 示例：异步请求后端校验拖放权限
  const canDrop = await fetch('/check-drop', {
    method: 'POST',
    body: JSON.stringify({from: e.detail.from, to: e.detail.to})
  }).then(res => res.json());
  
  // 告知库校验结果，同时清除超时
  e.detail.resolve(canDrop);
}, false);

优化点说明 #

• 移除了全局变量Draggable.dropAllowed，避免了全局状态带来的耦合问题
• 同步逻辑优先处理，无需等待超时，提升了拖放操作的响应速度
• 原生支持异步校验场景，给用户提供了更多灵活性
• 超时逻辑内置在事件Promise中，无需维护多个独立的超时定时器
• 结果通过Promise直接返回，代码逻辑更清晰、简洁

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