拖拽排序中误触父级源于dragstart事件冒泡，解决需精准拦截：为目标元素绑定dragstart并调用preventdefault()和stoppropagation()，移除父容器draggable属性，结合sortable.js的disabled控制及捕获阶段过滤。
拖拽排序中误触父级，本质是 dragstart 事件冒泡导致的连锁响应——子元素开始拖拽，事件一路向上触发到父容器，结果父容器也被“拖动”或意外添加样式。解决的关键不是彻底禁用冒泡，而是精准拦截、分层控制。
只让目标元素响应 dragstart
给真正要拖拽的元素（比如列表项 <li>）绑定 dragstart，并在 handler 中调用 event.preventDefault() 和 event.stopPropagation()：
- preventDefault()：阻止浏览器默认拖拽行为（如选中文本、拉出光标），这是拖拽生效的前提
-
stopPropagation()：防止 dragstart 冒泡到父容器（如
<ul></ul>），避免它被误识别为可拖拽目标
示例：
document.querySelectorAll('.sortable-item').forEach(item => {
item.addEventListener('dragstart', e => {
e.preventDefault();
e.stopPropagation();
// 可选：设置拖拽数据
e.dataTransfer.setData('text/plain', item.dataset.id);
});
});
父容器明确禁用 draggable 属性
即使不监听 dragstart，只要父容器有 draggable="true"，它仍可能被浏览器当作可拖拽目标。务必移除该属性或设为 false：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- HTML 中直接写：
<ul draggable="false"></ul> - 或 JS 动态清除：
container.removeAttribute('draggable') - 配合 CSS 强化防护：
user-select: none; pointer-events: none;（仅对非拖拽区域适用）
用 Sortable.js 的 disabled 配合业务逻辑
若使用 Sortable.js，别只靠 CSS 或事件监听“堵漏”，要用它的原生能力做状态管控：
- 初始化时设
disabled: true，再按需开启 - 点击内部按钮（如编辑、删除）时，临时禁用：
sortable.option('disabled', true) - 松开鼠标或操作完成后再恢复：
sortable.option('disabled', false) - 特别注意：disabled 为 true 时，整个列表完全不响应任何拖拽手势，包括 dragstart 冒泡也不会触发排序逻辑
捕获阶段提前拦截（进阶策略）
如果父容器必须保留 dragstart 监听器（比如要做全局拖拽状态管理），可在捕获阶段拦截并过滤非目标事件：
- 监听时传第三个参数
true进入捕获阶段 - 检查
e.target是否为你允许拖拽的元素，否则直接preventDefault() - 这样既保留父级监听能力，又避免误响应子元素拖拽
示例：
container.addEventListener('dragstart', e => {
if (!e.target.classList.contains('sortable-item')) {
e.preventDefault();
}
}, true); // 捕获阶段Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
