一、用户行为三剑客

　　以下3个CSS属性：用户选择属性允许您设置是否允许用户在页面中选择文本或图形内容;用户修改属性可以设置输入框是否允许输入内容，以及是否只允许输入纯文本。有关详细信息，请参见文章“如何使内容可编辑元素仅输入纯文本”;

　　user-drag属性数据可以通过设置是否允许页面设计元素拖拽。

　　本文的主题是user-drag属性。

　　二、禁止用户拖拽

　　页面中的图文设计元素进行设置-webkit-user-drag:none，则该元素就无法拖拽了。让我们用下面的案例来了解一下相应的效果。

　　有两个图像，一个是默认的 ui 样式，另一个是 css 代码，用来禁用拖放。相关的 html 和 css 代码如下:

　　＜img src=“by zhangxinxu.jpg“＞

　　< img src = "张。jpg " class = " user-drag " >

　　.user-drag {

　　- webkit-user-drag: None;

　　}

　　因此，当拖动默认图片时，您会看到一个半透明的图片飞出，而设置了禁止使用拖拽的图片，点击拖拽的时候，是没有其他任何教学效果的：

　　眼见为实，你可以点击这里：CSS用户拖动设置元素禁止拖动演示。

　　火狐浏览器还不支持，chrome 浏览器不支持 webkit-user-drag: element declaration，移动设备不能使用，用户拖动兼容性

　　三、HTML draggable属性

　　可以通过 css 设置拖放的优势在于，它很容易控制，并且可以很好地适用于只需要兼容 chrome 和 safari 浏览器的桌面 pc web 产品。

　　如果HTML有操作系统权限，且最终效果我们需要一个较好的兼容性，则还是企业需要进行使用中国传统的draggable属性可以实现，通过自己设置true还是false设置元素能够拖拽。

　　例如：

　　 ＜!-- 元素可以被拖动 --＞

　　 ＜img src=“zxx.jpg“ draggable=“true“＞

　　 ＜!-- 元素不可以被拖动 --＞

　　 ＜img src=“zxx.jpg“ draggable=“false“＞

　　 draggable属性常常和原生的drag & drop事件进行配合我们使用，可以通过实现对于任意一个元素的拖拽效果。

　　对于那些以前贡献过演示的人，您可以访问此处了解实现细节，这些演示包括拖动、插入、排序、删除等完整的交互。

　　Html drawable 属性的兼容性相当好，移动支持到处都是，而且 ie10 + 浏览器也支持 html 属性，这些属性在当今时代基本上可以安全使用:

　　以上就是石家庄网站建设小编介绍的css禁止拖拽的元素介绍，想要做网站建设或者小程序的，欢迎前来咨询了解，我们还有专业的团队，竭诚为您服务！