css元素可拖动,如何使用CSS禁止元素拖拽？

一、用户行为三剑客

以下3个CSS属性&＃xff1a;

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

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

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

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

二、user-drag禁止拖拽

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

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

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

.user-drag {

-webkit-user-drag: none;

}

结果&＃xff0c;默认图片拖拽的时候&＃xff0c;会看到一个半透明的图片飞出来&＃xff0c;就像这样&＃xff1a;

而设置了禁止拖拽的图片&＃xff0c;点击拖拽的时候&＃xff0c;是没有任何效果的&＃xff1a;

//zxx: 如果你看到这段文字&＃xff0c;说明你现在访问是体验糟糕的垃圾盗版网站&＃xff0c;你可以访问原文获得很好的体验&＃xff1a;https://www.zhangxinxu.com/wordpress/?p&＃61;9969(作者张鑫旭)

兼容性

Firefox浏览器尚未支持&＃xff0c;Chrome浏览器不支持-webkit-user-drag: element声明&＃xff0c;移动端不能使用&＃xff0c;具体如下截图所示&＃xff1a;

三、HTML draggable属性

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

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

例如&＃xff1a;

可以拖动的效果类似这样&＃xff1a;

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

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

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

四、结语、碎碎念

上个月开始开始默默写小说&＃xff0c;估计至少100多万字&＃xff0c;目前更新了20万字&＃xff0c;不无脑&＃xff0c;看得人不是很多&＃xff0c;这也正常&＃xff0c;主要还是做自己认为有意义和有价值的事情&＃xff0c;等写到50万字时候尝试安利下。

下个月新书《CSS新世界》应该要出版了&＃xff0c;实在是太慢了&＃xff0c;去年国庆就写好了&＃xff0c;这都过去8个月了&＃xff0c;又出来很多CSS新特性&＃xff0c;没办法&＃xff0c;出版作品&＃xff0c;三校三审&＃xff0c;这个我不能左右。

博客这边的技术文章还是保持平均一周更新一篇的节奏。

过两天就是六一儿童节了&＃xff0c;祝各位大朋友小朋友节日快乐&＃xff01;

本文为原创文章&＃xff0c;欢迎分享&＃xff0c;勿全文转载&＃xff0c;如果实在喜欢&＃xff0c;可收藏&＃xff0c;永不过期&＃xff0c;且会及时更新知识点及修正错误&＃xff0c;阅读体验也更好。

本文地址&＃xff1a;https://www.zhangxinxu.com/wordpress/?p&＃61;9969

(本篇完)