WeakMap 适合拖拽状态管理，因其键为弱引用的 DOM 元素，元素被移除时对应状态自动失效，避免内存泄漏；可分别用 dragState、dropTargetState 等 WeakMap 管理源、目标及会话状态。
WeakMap 是管理拖拽组件与目标元素关联状态的理想工具，因为它能避免内存泄漏，且天然支持以 DOM 元素为键。
为什么 WeakMap 适合拖拽状态管理
拖拽过程中，常需临时记录“哪个组件正在拖拽”、“当前悬停在哪个目标上”、“是否允许放置”等状态。这些状态的生命周期应与 DOM 元素一致：元素被移除时，相关状态应自动消失。WeakMap 的键是弱引用，不阻止垃圾回收，DOM 元素一旦从文档中移除且无其他引用，其对应的 WeakMap 条目会自动失效，无需手动清理。
典型用法：绑定拖拽源、目标与状态
可创建多个 WeakMap，分别管理不同维度的状态：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
dragState：以拖拽源元素（
draggable节点）为键，存储当前拖拽数据、起始位置等； -
dropTargetState：以潜在目标元素（如
.drop-zone）为键，记录是否高亮、是否接受当前拖拽类型； -
activeDragSession：以
document或全局上下文为键（可用单例 WeakMap），存当前活跃的拖拽源和目标配对，便于跨区域协调。
实际代码示例
以下是一个轻量级实现片段：
立即学习“Java免费学习笔记（深入）”；
const dragState = new WeakMap();
const dropTargetState = new WeakMap();
// 拖拽开始
element.addEventListener('dragstart', (e) => {
dragState.set(e.target, {
data: e.dataTransfer.getData('text/plain'),
origin: e.target
});
});
// 拖拽进入目标区
target.addEventListener('dragenter', (e) => {
e.preventDefault();
dropTargetState.set(e.target, { isOver: true, canDrop: true });
});
// 拖拽离开目标区
target.addEventListener('dragleave', (e) => {
// 只有真正离开才清除，避免子元素触发干扰
if (!e.target.contains(e.relatedTarget)) {
dropTargetState.delete(e.target);
}
});
// 放置完成
target.addEventListener('drop', (e) => {
e.preventDefault();
const source = dragState.get(e.target); // 实际应从 dragState.get(dragState 的源) 获取
if (source && dropTargetState.get(e.target)?.canDrop) {
// 执行放置逻辑
}
// 状态自动随元素销毁而释放，无需显式清理
});
注意事项与边界处理
WeakMap 键必须是对象，不能是字符串或基本类型；DOM 元素被 innerHTML = '' 或 remove() 后，若无其他引用，对应状态即失效。但要注意：
- 若组件使用虚拟 DOM（如 React），真实 DOM 元素可能被复用或缓存，WeakMap 仍有效，但需确保键是最终挂载的节点；
- 避免将 WeakMap 存在闭包外长期持有——它本身不泄露，但若误存了对元素的强引用（如额外变量），反而阻碍回收；
- 调试时无法直接遍历 WeakMap，可用辅助 Map 记录开发期日志（仅 dev 环境启用）。
