精华内容
下载资源
问答
  • H5拖放API

    2017-08-08 20:57:13
    拖放API其原理就是利用事件触发去改变元素的位置或在DOM中的结构;它分一两个场景,一个是拖,一个放。 还有一个关系场景 ,源对象与目标对象的关系。 源对象三个事件:dragstart => 拖动开始  drag => 拖动...

    拖放API其原理就是利用事件触发去改变元素的位置或在DOM中的结构;它分一两个场景,一个是拖,一个放。 还有一个关系场景 ,源对象与目标对象的关系。


    源对象三个事件:dragstart  =>  拖动开始

                                    drag  =>  拖动开始进行中

                                    dragend  =>  拖动结束


    想要实现鼠标跟随效果的话,就要从事件中获得鼠标的坐标;然后赋值给元素,如下代码:

          

         div.οndrag=function(e){

                 var x=e.pageX;    // 获得鼠标在页面的坐标

                 var x=e.pageX;   // 获得鼠标在页面的坐标

         }


    需要让鼠标保持开始按下的位置的话,还需要获得刚开始的鼠标相对于元素的偏移量;也就是鼠标刚开始按在了元素的哪个位置。

              

               div.οndragstart=function(e){

                         var x=e.ofsetX;    // 获得鼠标偏移量

                         var x=e.ofsetX;   // 获得鼠标偏移量

                }


    这里有个坑就是当鼠标放开时坐标会回到0,0,用if判断解决,判断当为0,0时不做元素的位置修改。


    目标对象四个事件:dragenter  拖动进入

                                        dragover    拖动在目标对象上方

                                        dragleave  拖动离开

                                        drop            拖完释放


    dragover完成 有个默认行为:触发dragleave 拖动离开事件,导致无法触发drop事件,要触发drop事件需要阻止默认行为。


    开发中开发一些效果需要两个对象事件之间传数据,这时又有一个事件对象就登场了,这个对象就是dataTranfer.

    我称之为拖拉机对象,这个事件是专门用来承载不同事件源中传输数据的,这七个事件源中都有dataTranfer对象,不过不是同一个,所以需要设置数据,可以看作是个容器。


    具体用法:在源对象设置数据,然后到目标对象事件中获取数据。

                                       div.dragstart=function(){

                                              e.dataTranfer.setData( "k",  "v" )    //设置数据,只能是键值对的字符串,键相当于对象中的属性名,取数据时需要用它

                                       }

                                 

                                      div2.οndrοp=function{

                                             e.dataTranfer.getData( "k" )    //获取之前设置的数据

                                      }


    这样就可以实现相要的效果了。











    展开全文
  • H5拖放API使用及小案例实现 H5拖放API HTML5定义的拖放指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件,在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置,并且在移动到处于具有允许放置状态的...

    H5拖放API使用及小案例实现

    H5拖放API

    HTML5定义的拖放指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件,在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置,并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素,到保持鼠标左键按下并移动该元素的整个过程称为“拖”;将被动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。
    主流浏览器支持情况如下:

    在这里插入图片描述

    IE9+Firefox3.5Opera11.5Chrome4.0Safari4+
    5.21不支持

    拖放属性

    事件名称触发事件的元素说明
    dragstart该事件由被拖拽的元素触发。当用户刚开始拖动元素时触发该事件。
    drag该事件由被拖拽的元素触发。当元素处于被拖动状态时触发该事件。
    dragenter该事件由被拖拽的元素触发。当被拖动的元素进入到可以被放置下来的有效区域的瞬间触发该事件。
    dragenddragend拖放操作结束
    dragover该事件由目标区域元素触发。当被拖动的元素处于可以被放置下来的有效区域内时,该事件会不停地被触发。该事件状态在dragenter之后,在dragleave之前。
    dragleave该事件由被拖拽的元素触发。当被拖动的元素离开了可以被放置下来的有效区域的瞬间触发该事件。
    drop该事件由目标区域元素触发。当被拖动的元素被放置在有效的区域时触发该事件。

    拖放生命周期触发事件的顺序

    1. dragstart
    2. drag
    3. dragenter
    4. dragover
    5. dragleave
    6. drop
    7. dragend

    拖动事件尝试

    <!-- 
    draggable 属性 是设置元素为可拖动的
    	true : 可以拖动
    	false:不可拖动
    -->
    <div id="box" draggable="true"></div>
    <script type="text/javascript">
    // 获取源对象
    var box=document.querySelector('#box');
    			
    // 拖拽开始时触发,只会触发一次
    box.ondragstart=function(){
    	console.log('拖拽开始');
    	box.style.background="#336699";
    }
    	// 拖拽触发的事件,连续触发,只要鼠标不松开就会一直触发
    box.ondrag=function(){
    	console.log('拖动的过程中');
    	box.style.background="#336699";
    	box.style.opacity='0.2';
    }
    			
    // 拖动结束时,触发该事件,只要鼠标一松开就触发
    box.ondragend=function(){ //
    	console.log('拖动结束时');
    	box.style.background="orange";
    	box.style.opacity='1';
    }
    			
    			
    </script>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    #box{
    	width: 200px;
    	height: 200px;
    	background-color: orange;
    }
    </style>
    

    释放事件尝试

    <div id="box" draggable="true"></div>
    			
    <div id="trash">
    	目标对象
    </div>
    <script type="text/javascript">
    	// 获取源对象
    	var box =document.getElementById('box');
    	
    	// 开拖动时
    	 box.ondragstart=function(e){
    		// 记录开始拖动时的,鼠标在div盒子上的偏移量
    	 	offsetX=e.offsetX;
    		offsetY=e.offsetY;
    	 }
    	
    	 box.ondrag=function(e){
    	 	var x =e.pageX;
    	 	var y= e.pageY;
    		
    	 	// console.log(x,y);
    	 	if(x==0 && y==0)return;//不处理拖动最后一刻x和y都为0情形
    		y-=offsetY;
    	 	x-=offsetX;
    		
    	 	box.style.left=x+'px';
    	 	box.style.top=y+'px';
    	 }
    	
    	// 为目标对象添加事件监听 --- 删除拖动的源对象
    	var trash =document.getElementById('trash');
    	
    	trash.ondragenter=function(){
    		console.log('源对象进入到了目标对象');
    		// trash.style.background='orange';
    	}
    	
    	/* 
    		ondragover 和 ondragleave 事件 的默认行为是拒绝任何被拖放的元素.
    		因此必须阻止这种默认行为,不然ondrop会失效
    	 
    	 */
    	trash.ondragover=function(e){
    		console.log('源对象进入目标对象');
    			// e.preventDefault();
    			return false;
    	}
    	trash.ondragleave=function(e){
    		console.log('源对象离开目标对象');
    		e.preventDefault();
    	}
    	
    	// 在目标对象中释放了源对象
    	trash.ondrop=function(e){
    		console.log('释放了');
    		// 从父元素中删除子节点
    		box.parentNode.removeChild(box);
    	}
    	
    </script>
    <style type="text/css">
    	*{margin: 0;padding: 0;}
    	#box{
    		width: 200px;
    		height: 200px;
    		background-color: orange;
    		/* 元素绝对定位,修改top、lef值 */
    		position: absolute;
    	}
    	
    	
    	#trash{
    		width: 400px;
    		height: 400px;
    		border: 2px solid #FF1493;
    		margin-left: 250px;
    	}
    </style>
    

    datatransfer 对象
    HTML5拖放API允许在拖放过程中携带一项或多项自定义数据内容。这些数据内容可以使用拖放事件DragEvent中的datatransfer属性进行添加和处理,该属性来源于HTML5中的DataTransfer对象,其中包含的每项数据均可有独立的数据类型。

    DataTransfer对象的常用属性:

    属性名称说明
    dropEffect用于获取或重置当前的拖放类型,共有4种取值。
    effectAllowed提供所有允许的拖放类型。
    types该属性返回值为字符串数组,包含了所有存入数据的类型。
    items该属性返回值为DataTransferItemList对象。
    files如果拖放的是一个或多个本地文件,该属性返回值为文件列表对象。

    datatransfer 方法

    方法名称说明
    getData(format)从dataTransfer对象取出数据
    setData(format,data)在dragstart事件调用此函数,在dataTransfer对象中存储此对象
    clearData()清除DataTransfer对象中数据。如果省略参数则表示清除全部数据
    addElement(element)提供一个页面元素作为参考,同时使用参数作为拖放反馈图像
    setDragImage(image,x,y)设置拖拽元素时所显示的自定义图标。其中image为图片对象,x和y分别指的是图标与鼠标在水平和垂直方向上的距离。

    案例实现(实现图片拖动,记得自己添加图片

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.add_border{
    				float: left;
    				border: 3px #ccc dashed;
    				margin: 10px;
    				min-height: 100px;
    				padding: 10px;
    				width: 300px;
    			}
    			img{
    				width: 100px;
    				height: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 
    			1.通过拖放将照片从左侧“相册”区域拖拽到右侧“垃圾箱”区域;
    			2.拖拽过程中,“温馨提示”部分要及时提醒,当前正在进行拖放操作;
    		 -->
    		<div id="info"><h2>温馨提示:可以将照片直接拖入到垃圾箱中</h2></div>
    		<!-- 拖拽元素(源对象) -->
    		<div id="album" class="add_border">
    			<h2>相册</h2>
    			<img src="img/图片1.jpg" draggable="true" id="img1">
    			<img src="img/图片2.jpg" draggable="true" id="img2">
    			<img src="img/图片3.jpg" draggable="true" id="img3">
    		</div>
    		<!-- <img src="img/1.png" id="test"> -->
    		<!-- 目标对象 -->
    		<div id="trash" class="add_border"><h2>垃圾箱</h2></div>
    		 
    		<script type="text/javascript">
    			// 获取源对象 和 目标对象
    			var album  =document.getElementById('album');
    			var tarsh =document.getElementById('trash');
    			var info =document.getElementById('info');
    			
    			// 开始拖放操作
    			album.ondragstart=function(e){
    				// 得到被拖放的照片(img)id
    				var dragImgId = e.target.id;
    				// 得到被拖动元素
    				var dragImg = document.getElementById(dragImgId);
    				
    				// 拖拽结束
    				dragImg.ondragend=function(){
    					info.innerHTML='<h2>温馨提示:可以将照片直接拖入到垃圾箱中</h2>'
    				}
    				// 存放被拖拽的元素
    				e.dataTransfer.setData('dragImgId',dragImgId)
    				
    			}
    			
    			// 拖拽的过程
    			album.ondrag=function(){
    				info.innerHTML='<h2>照片正在被拖动</h2>'
    			}
    			
    			// 关闭默认处理
    			tarsh.ondragenter=function(){return false}
    			tarsh.ondragover=function(){return false}
    			
    			// 源对象进入到目标元素并且释放时
    			tarsh.ondrop=function(e){
    				var dragImgId= e.dataTransfer.getData('dragImgId');
    				// 得到被拖动元素
    				var dragImg = document.getElementById(dragImgId);
    				// console.log(dragImg);
    				
    				// 从相册div中删除该照片的节点
    				dragImg.parentNode.removeChild(dragImg);
    				
    				// 将被拖动的照片dom节点添加到垃圾箱中的div中
    				tarsh.appendChild(dragImg);
    				info.innerHTML='<h2>温馨提示:可以将照片直接拖入到垃圾箱中</h2>'
    			}
    			
    		 // var test=	document.getElementById('test');
    		 // console.log(test);
    		 // test.remove();
    		</script>
    	</body>
    </html>
    

    案例实现(拖拽文件显示文件信息)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#section{
    				height: 300px;
    				width: 50%;
    				margin-top: 30px;
    				border: 2px #FFA500 solid;
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 从浏览器外面吧文件拖动到投放区域,并显示文件的信息 -->
    		<div id="section">
    			将文件拖放到此区域释放
    		</div>
    		
    		<table border="1" id="msg">
    			<tr>
    				<th>名称</th>
    				<th>文件大小</th>
    				<th>文件类型</th>
    			</tr>
    			
    		</table>
    		
    		<script type="text/javascript">
    			// 得到目标对象(文件存放区域)
    			var sec =document.querySelector('#section');
    			// 信息存放区
    			var msg =document.querySelector('#msg');
    			// 关闭默认事件
    			sec.ondragover=function(e){
    				e.preventDefault();
    			}
    			sec.ondrop=function(e){
    				e.preventDefault();
    				// types 拖拽的类型
    				// console.log(e.dataTransfer.types);//files
    				
    				// 拖拽元素进入投放区并且显示文件样式
    				// console.log(e.dataTransfer.files[0])
    				for(var i=0;i<e.dataTransfer.files.length;i++){
    					var file = e.dataTransfer.files[i];
    					// 想要知道file属性中有什么字段,可以直接打印
    					console.log(file)
    					
    					var html = "<tr><td>"+file.name+
    								"<td>"+file.size+"</td>"+
    								"<td>"+file.type+"</td>"+
    								"</td></tr>";
    					msg.innerHTML+=html;
    					
    					
    				}
    				
    			}
    		</script>
    	</body>
    </html>
    
    

    制作整理不易,以上内容均为原创(参考了部分官方文档和老师整理的案例)。如要引用请附上本文链接,如有疑问可以在评论区畅所欲言,作者看到会第一时间回复,欢迎交流!

    展开全文
  • <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>H5拖放API相关触发事件</title> <style> body { text-align: cen...

    <!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title>H5拖放API相关触发事件</title>
        <style>
            body {
                text-align: center;
            }
    
            .half_opacity {
                opacity: 0.3
            }
    
            .full_opacity {
                opacity: 1;
            }
        </style>
    </head>
    
    <body>
        <h1>拖动的目标对象触发的事件</h1>
        <img id="trash" src="images/trash.png" class="half_opacity">
        <hr />
        <img src="images/p4.png">
        <script>
            //源对象被拖动着进入目标对象
            trash.ondragenter = function () {
                console.log('drag enter')
                trash.className = "full_opacity"
            };
            //源对象被拖动着悬停在目标对象上方
            trash.ondragover = function (e) {
                //dragover事件默认行为:必须触发dragleave
                //阻止默认行为,使得drop可能触发
                e.preventDefault();
                console.log('drag over')
                trash.className = "full_opacity"
            };
            //源对象被拖动着离开了目标对象
            trash.ondragleave = function () {
                console.log('drag leave')
                trash.className = "half_opacity"
    
            };
            //源对象在目标对象上释放
            trash.ondrop = function () {
                console.log('drop')
                trash.className = "half_opacity"
            }
        </script>
    </body>
    
    </html>

     

    展开全文
  • <!DOCTYPE html> <... <head lang="en">...meta charset="UTF-8">...H5拖放API相关触发事件</title> <style> body { text-align: center; } .half_opacity { opacit.
    <!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title>H5拖放API相关触发事件</title>
        <style>
            body {
                text-align: center;
            }
    
            .half_opacity {
                opacity: 0.3
            }
    
            .full_opacity {
                opacity: 1;
            }
        </style>
    </head>
    
    <body>
        <h1>拖动的目标对象触发的事件</h1>
        <img id="trash" src="images/trash.png" class="half_opacity">
        <hr />
        <img src="images/p4.png">
        <script>
            //源对象被拖动着进入目标对象
            trash.ondragenter = function () {
                console.log('drag enter')
                trash.className = "full_opacity"
            };
            //源对象被拖动着悬停在目标对象上方
            trash.ondragover = function (e) {
                //dragover事件默认行为:必须触发dragleave
                //阻止默认行为,使得drop可能触发
                e.preventDefault();
                console.log('drag over')
                trash.className = "full_opacity"
            };
            //源对象被拖动着离开了目标对象
            trash.ondragleave = function () {
                console.log('drag leave')
                trash.className = "half_opacity"
    
            };
            //源对象在目标对象上释放
            trash.ondrop = function () {
                console.log('drop')
                trash.className = "half_opacity"
            }
        </script>
    </body>
    
    </html>
    展开全文
  • H5拖放API基础篇

    千次阅读 2017-11-04 00:04:33
    看过《javascript精粹》朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见一园友写了一篇《HTML5 进阶系列:拖放 API 实现拖放排序》,真...
  • 不要搞错,本文不是讲如何拖地的。看过《javascript精粹》朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见一园友写...
  • H5拖放API:实现自动生成相框

    千次阅读 2020-04-06 17:00:05
    ">H5拖放API之图片相框效果</h1> <hr /> <div class="box"></> 请将图片拖放至此处 </div> <div class="box2"></div> </body> </html> CSS部分: * { margin: 0px; padding: 0px; } .box2 hr { ...
  • H5拖放

    2019-03-12 11:31:38
    HTML新特性之七 —— 拖放API —— 小重点&amp;小难点 Drag:拖动 Drop:释放、丢弃 Drag &amp; Drop: D&amp;D,拖动着一个元素可以在页面中某处释放操作。 HTML5中为拖放操作提供了七个事件句柄: ...
  • 使用node.js读取文件 在主进程中添加支持node的...body> html> 结合调用h5拖放api 实现拖放打开文件功能 <div class="content" id="content"> div> <script src="render/h5readfile.js">script> // html5拖放api:...
  • 2021年H5拖放删除运用

    2021-03-12 10:25:24
    利用H5新特性拖放API实现在拖放删除功能,以下是静态效果,实现的功能为拖放下面三架飞机中的某一架飞机图片至垃圾桶上方释放时,被拖放的飞机图片从三架飞机里面删除。 以下是代码实现 <!DOCTYPE html>...
  • H5拖放删除运用

    2019-06-26 07:10:05
    利用H5新特性拖放API实现在拖放删除功能,以下是静态效果,实现的功能为拖放下面三架飞机中的某一架飞机图片至垃圾桶上方释放时,被拖放的飞机图片从三架飞机里面删除。 以下是代码实现 <!DOCTYPE html> ...
  • H5C3-2拖放API

    2019-03-01 18:09:16
    拖放事件: dragstart:网页元素开始拖动时触发 dragover:被拖动元素停留在目标元素持续触发 drop:被拖动元素,落下时触发 拖放的步骤: 1.将想要拖放的元素设置为true 2.拖动什么 ondragstart和setData() 3.放到何处...
  • 实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。相框需要自己配置,设置为背景,在CSS中设置。效果如图:html部分:H5拖放API之图片相框效果>请将图片拖放至此处CSS部分:* {margin: 0px;pad...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,306
精华内容 522
关键字:

h5拖放api