如何使用CSS禁止元素拖拽？

以下3个CSS属性：

user-select属性可以设置是否允许用户选择页面中的图文内容；

user-modify属性可以设置是否允许输入框输入内容，以及是否只允许输入纯文本，详见“如何让contenteditable元素只能输入纯文本”一文；

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

而本文要介绍的主角就是最后的user-drag属性。

二、user-drag禁止拖拽

页面中的图文元素设置-webkit-user-drag:none，则该元素就无法拖拽了。

我们通过下面这个案例了解下对应的效果。

有两张图片，一张是默认的UI样式，另外一张设置禁止拖拽的CSS代码，相关HTML和CSS代码如下所示：

< img src="by zhangxinxu.jpg">

< img src="by zhangxinxu.jpg" class="user-drag">

.user-drag {

    -webkit-user-drag: none;

}

使用CSS设置元素能够拖拽的优点在于控制方便，适合用在只需要兼容Chrome、Safari浏览器的桌面端PC网页产品中。

如果HTML有操作权限，且最终效果需要较好的兼容性，则还是需要使用传统的draggable属性实现，通过设置true还是false设置元素能够拖拽。

例如：

< img src="zxx.jpg" draggable="true">

< img src="zxx.jpg" draggable="false">

draggable属性常常和原生的drag & drop事件配合使用，可以实现任意元素的拖拽效果。

以前专门贡献过包含拖动、插入、排序、删除等完整交互的demo，有些人应该还不知道，可以访问这里了解下其中的实现细节。

HTML draggable属性的兼容性是相当的好，移动端全部支持，以及IE10+浏览器也都支持，基本上在如今这个年代是可以放心使用的HTML属性