在前端开发中，有时候我们需要禁止用户从网页上拖动图像或其他元素，以保护网站的安全性和用户体验。本文将介绍如何使用 JavaScript 和 CSS 实现禁止从 HTML 页面拖动图像的效果。
HTML5 Drag and Drop API
HTML5 提供了一个 Drag and Drop API，使得用户可以在网页上拖放元素。这个 API 是基于事件的，主要包括以下三个事件：
dragstart：当用户开始拖动一个元素时触发。dragover：当被拖动的元素进入一个可放置区域时触发。drop：当被拖动的元素在可放置区域被释放时触发。
为了禁止从网页上拖动图像，我们需要阻止这些事件的默认行为。
示例代码：
<img src="image.png" draggable="true">
-- -------------------- ---- ------- ----------------------------------------------------------- ------- -- - ----------------------- --- ------------------------------------- ------- -- - ----------------------- --- --------------------------------- ------- -- - ----------------------- ---
上面的代码中，我们给图片添加了 draggable 属性来启用拖放功能。然后，我们使用 addEventListener 方法监听 dragstart 事件，并在事件处理函数中调用 preventDefault 方法来阻止默认行为。同样地，我们还监听了 dragover 和 drop 事件，并在这些事件处理函数中也调用了 preventDefault 方法。
CSS User Select 属性
除了使用 JavaScript 阻止 Drag and Drop API 的默认行为，我们还可以使用 CSS 的 user-select 属性阻止用户选择元素。这个属性允许你控制用户是否可以选择文本或图像等元素。
示例代码：
img {
user-select: none;
}上面的代码中，我们给图片添加了 CSS 样式 user-select: none;，使得用户无法选择该元素。如果你想禁止整个页面上所有元素的选择，可以将这个样式应用于 body 或 html 元素。
总结
禁用从 HTML 页面拖动图像是一个常见的前端开发需求。我们可以使用 JavaScript 和 CSS 实现这个功能。通过阻止 Drag and Drop API 的默认行为和禁止用户选择元素，我们可以保护网站的安全性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9450
