html5，拖拽元素

最新推荐文章于 2022-12-27 10:22:01 发布
最新推荐文章于 2022-12-27 10:22:01 发布
阅读量250 收藏
点赞数
分类专栏： html 文章标签： html5 拖拽事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42228034/article/details/80348048
版权
本文介绍了HTML5中的拖拽API，包括拖拽元素和目标元素的各类事件，如ondragstart、ondragleave、ondragend、ondragenter、ondragover和ondrop。通过实例展示了如何实现元素内容的拖放操作，并强调了在使用ondrop事件时需要阻止ondragover事件的默认行为。
摘要由CSDN通过智能技术生成

        本文主要是记录一下自己学习html中的进度，未来可以回来复习一下。

        本文参考了@冯小东的文章——html5，拖拽api    

        链接：点击打开链接

        html5中新增了拖拽事件，其中分为拖拽元素的事件，和目标元素的事件。

        使用时需要给拖拽元素添加dragable="true"

        拖拽元素的事件有：ondragstart事件 开始拖拽时触发

                                      ondragleave事件 鼠标离开拖拽元素触发

                                      ondragend事件 结束拖拽触发

        目标元素的事件有：ondragenter事件 拖拽元素进入时触发

                                       ondragover事件 停止在目标元素时触发

                                       ondrop事件 当在目标元素上松开鼠标时调用。此方法默认被阻止，

                                        如需使用请阻止ondragover事件的默认行为（给ondragover事件添加 事件名.preventDefault()）

         以下是我第一次使用此方法是所做的内容，将一个div中的内容移动到另一个中

        


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  C沉冰
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
HTML5如何实现元素拖拽

				
			

			

				

					09-28
				

			

		

		

			
				
5. `ondragover`：拖动元素在目标元素上方移动时持续触发，需要调用`event.preventDefault()`防止默认的浏览器行为（例如阻止文件拖放）。  6. `ondragleave`：当拖动元素离开目标元素时触发，用于取消目标元素的...

			
		

	



                

              
                



	

		

			

				
					
HTML5—拖拽

					
最新发布

				
			

			

				

					qq_47218954的博客
				

				

					10-14
					
					677
					
				

			

		

		

			
				
拖拽入门

			
		

	



                


  
              

                


	

		

			

				
					
html5选择拖放,HTML5教程 | HTML5元素拖放

				
			

			

				

					weixin_33626609的博客
				

				

					06-03
					
					238
					
				

			

		

		

			
				
在HTML5中你可以拖拽页面中指定的HTML元素。通过使用javascript事件监听，你可以决定元素在拖拽元素之后所发生的事情。用于拖放的HTML元素中可以是以下两个角色：Draggable(可拖动元素)Drop target / drop zone(放置目标/放置区域)可拖动的元素是指用户可以在页面中拖动并放置在其它地方的元素。它可以是一个或多个元素。放置目标或放置区域是可拖动元素被放置的区域...

			
		

	





	

		

			

				
					
HTML5实现拖放

				
			

			

				

					上庸者-不服周
				

				

					09-30
					
					3945
					
				

			

		

		

			
				
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

			
		

	



		

			
		



	

		

			

				
					
HTML5 学习笔记（七）--- 元素拖放

				
			

			

				

					weixin_45092437的博客
				

				

					08-04
					
					831
					
				

			

		

		

			
				
一、拖放事件
1、概念
​		在 HTML5 中增加了多个针对元素拖放的事件，使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作，要想真正实现拖放后进行数据交互，还需要结合 dataTransfer 对象，才能真正实现拖放效果。
​		**注意：**要实现元素拖放，首先要在目标元素上 设置 draggable = “true” ，否则无法实现拖放。
2、事件
**① dragStart：**在元素拖动开始时触发，事件对象是被拖动元素。
**② drag：**在元素拖动过程中触发，事件对象是被拖动元素。


			
		

	





	

		

			

				
					
HTML5 元素拖放

				
			

			

				

					xiangxiongfly
				

				

					12-27
					
					1017
					
				

			

		

		

			
				
在HTML5中，我们只需要给元素添加一个draggable属性，然后设置该属性值为true，就能实现元素的拖放。

拖放，指的是“拖曳”和“释放”。在页面中进行一次拖放操作，我们必须先弄清楚两个元素：“源元素”和“目标元素”。“源元素”指的是被拖曳的那个元素，“目标元素”指的是源元素最终被释放到的那个元素。

			
		

	





	

		

			

				
					
HTML5元素拖拽drag与拖放drop相关API

				
			

			

				

					02-25
				

			

		

		

			
				
是有默认拖拽的比如说图片的拖拽选中文本的拖拽链接的拖拽浏览器默认允许我们拖拽图像、文本以及链接让其它元素被拖动也是可以实现的只需要在元素标签上添加一个属性当拖拽这个元素的时候，浏览器就会以半透明复本的...

			
		

	





	

		

			

				
					
jQuery实现html元素拖拽

				
			

			

				

					10-23
				

			

		

		

			
				
使用jQuery实现HTML元素拖拽效果就是一种常见的做法，这使得开发者可以用相对简单的方式，为网站增加动态和交互性。  首先，要使用jQuery实现拖拽功能，需要熟悉jQuery的基本使用，包括如何引入jQuery库、如何使用...

			
		

	





	

		

			

				
					
HTML5拖拽效果Demo

				
			

			

				

					05-01
				

			

		

		

			
				
例如，当拖动开始时，我们可以通过`event.dataTransfer`对象设置被拖动元素的数据：  ```javascript document.getElementById('dragItem').addEventListener('dragstart', function(event) {  event.dataTransfer....

			
		

	





	

		

			

				
					
html5实现元素拖拽,实现元素拖拽的两种方式

				
			

			

				

					weixin_32142311的博客
				

				

					06-19
					
					1842
					
				

			

		

		

			
				
第一种方式：使用h5的api datatransfer实现思路：1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。代码如下：.box1 {width: 100px;height: 100px;border: 1px black solid;margin-...

			
		

	





	

		

			

				
					
利用HTML5的drop、drag及拖动属性做元素位置交换

				
			

			

				

					07-01
				

			

		

		

			
				
使用九宫格作为画布背景；每个九宫格中的元素为数字、数学公式、物理公式(注:一切能在数学条件下代表大小的元素)；拖动九宫格选中元素到目标元素，元素进行两两交换位置；在每一次元素位置发生变化时进行比较当前九宫格中所有元素是否由小到大顺序排列，如顺序排列就进入下一关；

			
		

	





	

		

			

				
					
1+x 证书 Web 前端开发中级理论考试（试卷 7 ） 答案

				
			

			

				

					Zeus
				

				

					12-19
					
					4366
					
				

			

		

		

			
				
1+x 证书 Web 前端开发中级理论考试（试卷 7 ） 答案
官方QQ群
二、单选题共 30 题，60 分

改变元素的中心点进行变形处理使用哪个属性。（C）
A.flexgrow
B.transform
C.transform-origin
D.transition
下列哪项不支持 php 函数的功能。（C）
A 可变的参数个数
B 通过引用传递参数
C 通过指针传递参数
D 实现递归...

			
		

	





	

		

			

				
					
html5的元素拖拽

				
			

			

				

					讨厌走开啦
				

				

					05-07
					
					7510
					
				

			

		

		

			
				
html5 元素拖拽

			
		

	





	

		

			

				
					
Html5-实现元素拖拽(通用案例)

				
			

			

				

					sxl123123123的博客
				

				

					03-30
					
					980
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style> 
		 #div1{
		 	border: 3px solid green;
		 	height: 200px;
		 	width: 300...

			
		

	





	

		

			

				
					
移动端 拖拽元素

				
			

			

				

					weixin_49884163的博客
				

				

					08-19
					
					237
					
				

			

		

		

			
				
** （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
（2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
（3） 离开手指 touchend:**
e.targetTouches[0].pageX  、e.targetTouches[0].pageY
这两个为手指移动时 在页面上的坐标；
<script>
	    var div = document.querySelector('div');
        var startX 

			
		

	





	

		

			

				
					
HTML5 拖放元素

				
			

			

				

					Hillbox
				

				

					08-14
					
					169
					
				

			

		

		

			
				
对书中案例的理解和注释。使用draggable属性和方法来实现元素拖放。

			
		

	





	

		

			

				
					
HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解

				
			

			

				

					weixin_35187410的博客
				

				

					06-04
					
					1071
					
				

			

		

		

			
				
html5中可拖动dragable属性及其他成员的讲解发布时间：2020-04-22 11:08:02来源：亿速云阅读：350作者：小新这篇文章主要为大家详细介绍了html5中可拖动dragable属性及其他成员的讲解，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。可拖动dragable属性之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家...

			
		

	





	

		

			

				
					
HTML5拖拽API详解：轻松实现元素拖放功能

				
			

			

				

					
				

			

		

		

			
				
HTML5的拖拽与拖放drop相关API为Web开发者提供了一种直观且强大的交互方式，使得在创建动态网页时能更加便捷地处理用户操作。这个API旨在简化开发过程，让用户将更多的精力集中在核心业务逻辑上。  HTML5引入了`...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值