百度首页是如何实现元素禁止拖动的？
问题
百度首页是如何实现元素禁止拖动的？
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
提问者观察百度首页某些元素无法被拖动，猜测使用了 user-select: none 或 -webkit-user-drag: none 等 CSS 属性，但通过检查发现实际页面并未使用这些属性，反而观察到使用了拖动相关的 JS 事件，因此对具体实现方式产生疑问。
涉及技术
CSS、JavaScript、拖拽事件
期望结果
希望明确禁止元素拖动除了常见的 CSS 方案外，是否还存在基于 JS 事件监听的实现方式，以及百度首页具体采用的是哪一种。
回答
原始回答
user-select: none;
-webkit-user-drag: none;em...他没有用这些东西，但是我看到他用了拖动相关的事件了呀
AI 优化 · 回答整理
解答思路
禁止元素拖动常见的做法确实是 user-select: none 和 -webkit-user-drag: none 这两个 CSS 属性，但如果页面没有使用它们、却观察到了拖动相关事件的绑定，说明很可能是通过监听 dragstart 等原生拖拽事件、并在事件回调中调用 preventDefault() 来阻止默认的拖动行为。
示例代码
/* 常见的 CSS 方案 */
.no-drag {
user-select: none;
-webkit-user-drag: none;
}
/* 基于事件的方案 */
element.addEventListener('dragstart', function (e) {
e.preventDefault();
});
详细说明
浏览器中「元素可以被拖动」通常来自两类默认行为：文本/图片的原生拖拽（如拖动一张图片到桌面）会触发 dragstart 事件，以及用户选中文字后产生的拖动效果。
user-select: none主要作用是禁止文本被选中，间接减少了「先选中再拖动」这种交互的可能性。-webkit-user-drag: none是 WebKit 私有属性，专门用于禁止图片等元素的原生拖拽行为。- 如果页面没有使用上述 CSS 属性，但依然表现出「无法拖动」的效果，说明很可能是在 JS 层面监听了
dragstart（或类似）事件，并在事件处理函数中调用event.preventDefault()，从而在事件层面直接拦截了浏览器默认的拖拽行为，效果上等同于 CSS 方案，但实现方式更灵活（比如可以针对特定条件动态启用/禁用）。
小结
禁止元素拖动不止 CSS 一种方式：除了 user-select: none 和 -webkit-user-drag: none，也可以通过监听 dragstart 等拖拽事件并调用 preventDefault() 来实现，后者更适合需要按条件动态控制拖拽行为的场景。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault