css禁止滑动-如何使用CSS禁止拖放元素？

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1、用户行为的三剑客

以下 3 个 CSS 属性：

本文要介绍的主角是最后一个用户拖动属性。

2. 严禁用户拖拽拖放

如果页面上的图形元素设置为-webkit-user-drag:none，则该元素将难以拖放。

我们通过下面的案例来了解一下相应的疗效。

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

.user-drag {
    -webkit-user-drag: none;
}

结果，当拖放默认图像时，会飞下一个半透明的图像，如下所示：

但是，如果你设置了严格禁止拖拽的图片css禁止滑动，那么当你点击拖拽时，就没有效果了：

//zxx: 如果您看到此文字，则意味着您正在访问垃圾邮件和盗版网站，体验不佳。 您可以访问原文以获得良好的体验：（作者：张新旭）

眼见为实，可以硬点这里：CSS用户拖拽设置元素严禁拖放演示

兼容性

Firefox浏览器仍然不支持，Chrome浏览器也不支持-webkit-user-drag:element语句，无法在移动端使用，如下截图：

3. HTML可拖动属性

使用CSS设置元素是否可以拖放的优点是易于控制，适合在只需要兼容Chrome和Safari浏览器的桌面PC网页产品中使用。

如果HTML有操作权限，并且最终的效果需要更好的兼容性，那么仍然需要使用传统的draggable属性，通过设置true或false来实现元素是否可以拖放。

例如：

可以拖动的效果如下：

Draggable属性经常和原来的拖拽风暴结合使用，可以实现拖拽任意元素的效果。

过去，我贡献过包括拖动、插入、排序和删除等完整交互的演示。 有些人可能不知道。 您可以访问此处了解实施细节。

HTML的draggable属性的兼容性相当好。 所有移动终端均支持，IE10+浏览器也支持。 基本上，它是一个在这个时代可以放心使用的 HTML 属性：

4.结论，破碎的想法

上个月，我开始默默写小说。 估计至少有100万字。 到目前为止我已经更新了20万字。 我不傻，读的人也不多。 这个是正常的。 我主要做我认为有意义、有价值的事情。 到了50万字的时候，试试安利。

新书《CSS新世界》应该下个月出版。 太慢了。 这是去年国庆节写的。 已经8个月了，CSS的新特性也有很多。 没有办法发表作品。 三所学校第三次审判，这不是我能控制的。

博客上的技术文章仍然保持平均每周更新一篇的节奏。

七天后就是儿童节了，祝大家节日快乐！

本文为原创文章，欢迎分享，请勿全文转载，如果您确实喜欢css禁止滑动，可以收藏，永不过期，并且会及时更新知识点和纠错，阅读体验会更好。