css样式文字图片在浏览器中不能拖拽(不能选中，不能复制)

原创已于 2025-11-03 11:18:51 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

于 2021-01-26 10:06:06 首次发布

本文介绍如何使用HTML和CSS属性禁止网页内容被拖拽及选中，包括设置draggable属性为false来阻止元素拖动，以及利用多种user-select属性确保页面内容无法被用户选中。

css样式文字图片在浏览器中不能拖拽

q群 398913416 群里面有免费资料纯免费,大家一起学习,如果自己有什么好的学习资料也可以一起分享,
一个人的力量终究有限,共同进步。

draggable两个值：
true:可以拖拽(默认)
false:不可以拖拽

设置给body整个页面不能拖拽

<body draggable="false"> 
  <p >这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>

<body> 
  <p draggable="false">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>

css样式设置页面不能复制粘贴不能选中

body{
  -moz-user-select:none; /* Firefox私有属性 */
  -webkit-user-select:none; /* WebKit内核私有属性 */
  -ms-user-select:none; /* IE私有属性(IE10及以后) */
  -khtml-user-select:none; /* KHTML内核私有属性 */
  -o-user-select:none; /* Opera私有属性 */
  user-select:none; /* CSS3属性 */
}