尚武科技——负责任的企业公民

尚武十年[点击进入]

电话

电话咨询

pHONE CONSulTING

0311-87882018

QQ

在线咨询

ONliNE CONSulTING
百度商桥 在线客服
基础服务

基础服务

BaSIC SERVICES
业务
科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
使用css元素禁止元素被拖拽!

  一、用户行为三剑客

  以下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禁止拖拽的元素介绍,想要做网站建设或者小程序的,欢迎前来咨询了解,我们还有专业的团队,竭诚为您服务!





标签:石家庄网站建设
尚武科技
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   
合作答疑 |  企业邮箱 |  关于我们 |  联系我们 |  版权声明 |  会员中心 |  友情链接 |  免责声明
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved