使用css代码防止图片被拖拽的教程

最新推荐文章于 2023-12-04 21:08:21 发布
最新推荐文章于 2023-12-04 21:08:21 发布
阅读量809 收藏 2
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mo3408/article/details/134577731
版权

在网页中，我们经常使用图片来美化页面或辅助内容呈现，但有时用户会无意中拖拽图片，这会对页面布局或其他元素产生意想不到的影响。为了防止这种情况，我们可以使用CSS来禁止图片被拖拽。

 

img {

-webkit-user-drag: none;

-moz-user-drag: none;

-ms-user-drag: none;

user-drag: none;

}
 

如上面的代码所示，我们可以使用用户拖拽相关的CSS属性来实现禁止图片拖拽的效果。其中，-webkit-user-drag、-moz-user-drag、-ms-user-drag和user-drag属性分别对应不同的浏览器厂商。
 

如果希望同时禁止图片被复制，我们可以使用-webkit-user-select等相关属性：
 

 

img {

-webkit-user-drag: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}
 

以上代码中，-webkit-user-select、-moz-user-select、-ms-user-select和user-select属性也分别对应不同的浏览器厂商，用于防止图片被选中并复制。
 

总体来说，禁止图片被拖拽或复制可以让我们更好地控制网页的布局和展示效果，提高用户体验和页面质量。

                

        

        

        

    




    

      

        

            

              
                
                  瑆箫
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
防止图片拖动的CSS3技巧：提升安全性与用户体验

				
			

			

				

					专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
				

				

					01-13
					
					338
					
				

			

		

		

			
				
随着Web设计的不断发展，CSS3作为强大的样式表语言，为开发者提供了更多控制页面外观和交互的手段。其中，防止图片拖动是一项常见的需求，通过简单的CSS3属性设置，我们可以轻松地实现这一目标。在本文中，我们将深入探讨防止图片拖动的语法结构、示例代码以及使用注意事项。这项技巧不仅能够保护图片的版权信息，还能提升用户体验，使得页面设计更具吸引力。通过最佳实践的分享，我们将为您呈现一个简单而实用的解决方案，以满足您在Web开发中的特定需求。

			
		

	



                

              
                



	

		

			

				
					
css禁止文字选中与图片拖拽

				
			

			

				

					weixin_44328764的博客
				

				

					09-26
					
					535
					
				

			

		

		

			
				
禁止文字选中
.select-none {
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

user-select目前的兼容性

禁止图片拖拽
.drag-none {
    -webkit-user-drag: none;
}

user-drag目前的兼容性




			
		

	



                


  
              

                


	

		

			

				
					
【css】禁止拖拽选择图片

				
			

			

				

					KatyLight的博客
				

				

					08-02
					
					1225
					
				

			

		

		

			
				
【css】禁止拖拽选择图片

			
		

	





	

		

			

				
					
CSS禁止元素拖拽

					
最新发布

				
			

			

				

					hao_fly的博客
				

				

					12-04
					
					886
					
				

			

		

		

			
				
HTML draggable属性的兼容性是相当的好，移动端全部支持，以及IE10+浏览器也都支持，基本上在如今这个年代是可以放心使用的HTML属性。使用CSS设置元素能够拖拽的优点在于控制方便，适合用在只需要兼容Chrome、Safari浏览器的桌面端PC网页产品中。以前专门贡献过包含拖动、插入、排序、删除等完整交互的demo，有些人应该还不知道，可以访问这里了解下其中的实现细节。draggable属性常常和原生的drag & drop事件配合使用，可以实现任意元素的拖拽效果。页面中的图文元素设置。

			
		

	



		

			
		



	

		

			

				
					
css样式：禁用文字选中状态,禁止图片拖动

				
			

			

				

					晚风的博客
				

				

					11-22
					
					549
					
				

			

		

		

			
				
【代码】css样式：禁用文字选中状态,禁止图片拖动。

			
		

	





	

		

			

				
					
jquery图片鼠标拖动效果代码

				
			

			

				

					04-07
				

			

		

		

			
				
为了实现浮动层的效果，我们可以设置图片容器`#draggable-image`的CSS属性，使其始终位于屏幕中心，即使图片被拖动：  ```css #draggable-image {  position: absolute;  top: 50%;  left: 50%;  transform: ...

			
		

	





	

		

			

				
					
JS鼠标拖拽图片切换代码

				
			

			

				

					04-07
				

			

		

		

			
				
在本案例中，"JS鼠标拖拽图片切换代码"是一个应用了JS技术的项目，旨在实现一种独特的图片预览效果，即用户可以通过鼠标拖动来切换上下两张图片，类似于扑克牌的堆叠和翻转效果。这种效果可以增强用户的交互体验，常...

			
		

	





	

		

			

				
					
HTML5拖拽上传图片预览提交代码

				
			

			

				

					06-24
				

			

		

		

			
				
在拖拽上传图片时，我们首先需要监听`drop`事件，阻止浏览器的默认行为（如打开文件），然后读取被拖拽文件的数据。HTML5的File API提供了`FileReader`对象，我们可以用它来读取文件内容。对于图片文件，可以使用`...

			
		

	





	

		

			

				
					
HTML5全屏可拖拽图片横向切换代码

				
			

			

				

					04-25
				

			

		

		

			
				
3. **CSS3**: CSS3提供了更强大的样式控制和动画功能，例如过渡(transition)和动画(animation)，这可能被用来平滑地改变图片的显示状态，如淡入淡出效果。  4. **TweenMax**: TweenMax是GreenSock动画平台(GreenSock...

			
		

	





	

		

			

				
					
js鼠标图片拖动验证代码

				
			

			

				

					04-25
				

			

		

		

			
				
在本场景中，"js鼠标图片拖动验证代码"是一个利用JS来创建的图像验证机制，它通过拼图的方式增强网站的安全性，防止自动化程序如机器人进行恶意操作。这种验证方法通常用于登录、注册等需要用户验证身份的环节。  ...

			
		

	





	

		

			

				
					
禁止鼠标拖动图片在新窗口打开

				
			

			

				

					03-10
				

			

		

		

			
				
实现禁止鼠标拖动图片在新窗口打开



.

			
		

	





	

		

			

				
					
js css3实现图片拖拽效果

				
			

			

				

					12-11
				

			

		

		

			
				
本文实例为大家分享了css3实现图片拖拽效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      body{
        text-align: center;
      }
      .container{
        display: flex;
        justify-content: center;
      }
      .colorBox{
    

			
		

	





	

		

			

				
					
HTML禁止图片被拖拽

				
			

			

				

					weixin_50380723的博客
				

				

					12-15
					
					4538
					
				

			

		

		

			
				
禁止图片被拖拽

一般的图片可以通过鼠标拖拽进行复制粘贴，同时拖拽过程中会出现虚化的图片
如图


解决方法

方法一：设置draggable="false"

<img src="./a.jpg" draggable="false">


方法二：通过javascript禁止

<img id="a" src="./a.jpg">

<script>
	document.getElementById("a").onmousedown = function(e){
		e

			
		

	





	

		

			

				
					
html 禁止选择与复制，禁止图片拖拽

				
			

			

				

					PrimaryColor
				

				

					07-30
					
					1108
					
				

			

		

		

			
				
js实现：


['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
    document.addEventListener(ev, function(ev){
        ev.preventDefault();
        ev.returnValue = false;
    })
});

css实现：


body {
    -moz-user-select: none;
    -webkit-user-selec

			
		

	





	

		

			

				
					
CSS 禁止拖动 选中

				
			

			

				

					jinwenshuo2007的博客
				

				

					01-28
					
					676
					
				

			

		

		

			
				
# 禁止拖拽

-webkit-user-drag: none;

# 禁止选中

-webkit-user-select: none;


			
		

	





	

		

			

				
					
H5 图片禁止拖拽

				
			

			

				

					林一怂儿
				

				

					03-09
					
					926
					
				

			

		

		

			
				
一开始通过css样式，即可禁止图片的拖拽，没有成功。 ≧ ﹏ ≦
于是另辟道路
找到draggable这个H5新增的属性
非常方便~

属性说明
https://www.runoob.com/tags/att-global-draggable.html

			
		

	





	

		

			

				
					
js 禁止浏览器默认的图片拖动效果

					
热门推荐

				
			

			

				

					yxwb1253587469的博客
				

				

					11-04
					
					1万+
					
				

			

		

		

			
				
我是在谷歌浏览器中测试的，百度的搜索结果都没什么用，最后在谷歌搜索出了答案。
地址：http://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-page
  
  
  
中国站长天空-网页特效-鼠标特效-禁止鼠标拖动图片在新窗口打开  
  
与之间-->   
  
  
鼠标左键拖动图

			
		

	





	

		

			

				
					
css文本域禁止横向拖动

				
			

			

				

					xuanlv_haoshao的博客
				

				

					01-17
					
					4229
					
				

			

		

		

			
				
1、textarea文本域是可以横向，纵向拖动的
但是有时候需要约束，禁止横向拖动；只要追加样式：
textarea{
 resize:vertical;
 }
即可实现禁止横向拖动；
同样，当resize的属性为none时，则禁止拖动

			
		

	





	

		

			

				
					
关于禁止图片拖动的问题

				
			

			

				

					weixin_30535167的博客
				

				

					07-12
					
					255
					
				

			

		

		

			
				
最近在做一个公司的抢红包项目，会在页面上下红包雨，玩家点击红包来玩抢红包，但是当玩家在急促的点击中很容易触发图片的拖动，而在火狐浏览下浏览器下又有默认的图片拖动手势支持，火狐一拖动图片就会在新窗口打开图片，而IE而更BT，直接打开图片下载窗口，严重影响用户体验。
一开始想用css来解决，给图片加上img{pointer-events:none;} ,在火狐下可以解决，但是在IE下不起作用，后...

			
		

	





	

		

			

				
					
使用vue-video-player实现的具体代码

				
			

			

				

					07-15
				

			

		

		

			
				
使用vue-video-player实现Vue3视频播放器可拖动打点评论弹幕的具体代码如下：

1. 安装依赖：首先，你需要在Vue项目中安装vue-video-player库。可以使用npm或者yarn进行安装。

```bash
npm install vue-video-player
```

2. 引入依赖：在你的Vue组件中，引入并注册vue-video-player库。

```javascript
import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';

export default {
  // ...
  components: {
    VueVideoPlayer,
  },
  // ...
}
```

3. 创建视频播放器组件：在模板中，添加vue-video-player组件，并绑定视频源。

```html
<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
  </div>
</template>
```

4. 添加弹幕功能：在视频播放器组件中，添加一个弹幕层，并使用CSS样式控制其位置和样式。

```html
<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
    
    <div class="danmu-layer">
      <!-- 这里显示弹幕 -->
    </div>
  </div>
</template>

<style scoped>
.danmu-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 防止弹幕层遮挡视频播放器的交互 */
}
</style>
```

5. 实现弹幕拖动：在组件的方法中，添加鼠标事件监听器，获取用户的操作信息，并改变弹幕的位置。

```html
<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
    
    <div class="danmu-layer" @mousedown="startDrag" @mousemove="dragging" @mouseup="endDrag">
      <!-- 这里显示弹幕 -->
    </div>
  </div>
</template>

<script>
export default {
  // ...
  data() {
    return {
      isDragging: false,
      dragStartX: 0,
      dragStartY: 0,
      danmuLeft: 0,
      danmuTop: 0,
    }
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.dragStartX = event.clientX;
      this.dragStartY = event.clientY;
    },
    dragging(event) {
      if (this.isDragging) {
        const offsetX = event.clientX - this.dragStartX;
        const offsetY = event.clientY - this.dragStartY;
        this.danmuLeft += offsetX;
        this.danmuTop += offsetY;
        this.dragStartX = event.clientX;
        this.dragStartY = event.clientY;
      }
    },
    endDrag() {
      this.isDragging = false;
    },
  },
  // ...
}
</script>
```

6. 打点评论功能：添加一个按钮，当用户点击该按钮时，将评论信息添加到指定的时间点上。

```html
<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
    
    <div class="danmu-layer" @mousedown="startDrag" @mousemove="dragging" @mouseup="endDrag">
      <!-- 这里显示弹幕 -->
    </div>

    <button @click="addComment">添加评论</button>
  </div>
</template>

<script>
export default {
  // ...
  data() {
    return {
      // ...
      comments: [],
    }
  },
  methods: {
    // ...

    addComment() {
      const currentTime = this.$refs.videoPlayer.currentTime();
      const comment = {
        time: currentTime,
        text: '这是一条评论',
      };
      this.comments.push(comment);
    },
  },
  // ...
}
</script>
```

这是使用vue-video-player实现Vue3视频播放器可拖动打点评论弹幕的基本代码。你可以根据自己的需求进一步完善和定制，例如添加评论显示、弹幕样式等。记得根据实际情况修改代码中的选择器、样式和事件处理逻辑。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
瑆箫

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值