html拖放API,h5的拖拽api

　　一、关于拖拽API

　　拖放API是HTML5的一个新特性。相比其他新特性，其重要性占60%，在实际开发中的使用占30%。学习需要个人认为可以掌握。

　　二、什么是拖拽和释放？

　　拖动：拖动

　　释放：放下

　　拖放是指鼠标点击源对象后，一直移动对象不松手，一旦放开就放开。

　　三、什么是源对象和目标对象？

　　来源：是指我们鼠标点击的一个东西。在这里，它可以是一张图片、一个DIV、一段文本等等。

　　对象：我们拖动源对象并将其移动到一个区域。源对象可以进入这个区域，悬停在这个区域上(放开)，松开手放在这里(放开)，或者悬停并离开这个区域。

　　四、拖拽API的相关函数

　　解释完源对象和目标对象是什么，回到前端的拖放API。从上面的操作，我们可以得到几个函数。

　　被拖移的源对象可以触发的事件：

　　(1)ondragstart:开始拖动源对象。

　　(2)ondrag:源对象正在被拖动(鼠标可能在移动，也可能不在移动)

　　(3)ondragend:将源对象拖到最后。

　　拖动源对象以输入可由上面的目标对象触发的事件：

　　(1)ondragenter:目标对象被源对象拖动进入。

　　(2)ondragover:目标对象被源对象拖动悬停。

　　(3)ondragleave:源对象拖离目标对象。

　　(4)ondrop:将源对象拖到目标对象上释放/放开。

　　拖放API一共是7个函数！

　　五、如何在拖动的源对象事件和目标对象事件间传递数据

　　HTML5为所有与拖动相关的事件提供了一个新属性：

　　E.dataTransfer {} //数据传输对象

　　函数：用于在源对象和目标对象的事件之间传递数据。

　　在源上保存事件处理中的数据：

　　e.dataTransfer.setData( k，v)；//k-v必须都是字符串类型

　　在目标上的事件处理中读取数据：

　　var v=e . data transfer . get data(k)；示例1:实现一个可以通过鼠标拖动来移动的小平面。

　　提示：飞机需要绝对定位！获取鼠标在ondrag事件中的坐标值！

　　代码如下：

　　！DOCTYPE html html head lang= en meta charset= UTF-8 title/title style body { margin:0；位置：相对；} img{ position:绝对；} /style /head body h3随鼠标拖动而移动的小平面/h3img id= p3 src= img/P3 . png alt= /script P3 . ondragstart=function(e){ console . log(事件源P3开始拖动)；//记录鼠标刚拖动offsetX=e.offsetX后在平面上的偏移量；off sety=e . off sety；} p3。Ondrag=function (e) {console.log(事件源P3正在拖动)；var x=e.pageXvar y=e.pageYconsole . log(x - y)；//在//拖动事件的最后时刻，无法读取鼠标的坐标，pageX和pageY都变成0 if(x==0y==0){ return；//不处理拖动最后时刻x和y都为0的情况} x-=offsetX；y-=off sety；P3 . style . left=x px ；P3 . style . top=y px ；} p3。ondragend=function(){ console . log(拖动源对象P3结束)；} /script /body /html具有以下效果：

　　示例2:

　　在电脑中模拟“垃圾桶”的效果，一共显示三架小飞机。在垃圾桶上方拖动一个小平面后，这个小平面就从DOM树中删除了。

　　提示：Delete需要删除DOM子节点中的元素，并防止ondragover的默认行为！通过源对象和目标对象之间的数据传递来记录小平面的ID值！

　　重要信息：

　　Ondragover有默认行为！也就是触发ondragover时，ondrop会失败！这可能是浏览器的版本问题，可能要等浏览器不断更新才能解决！

　　怎么阻止？

　　当源对象悬停在目标对象上时，ondragover=function(e){//e . prevent default()；//阻止默认行为，以便drop可以触发.}ondrop=function(e){ //源对象松手，在目标对象中释放.}

　　代码如下：

　　！DOCTYPE html html head lang= en meta charset= UTF-8 title/title style body { text-align:center；} #trash {不透明度： 2；保证金：15px} /style /head body h3把飞机拖到垃圾桶，从DOM树中删除子元素。/H3 img ID= trash src= img/trash _ full . png HR/img ID= P3 class= src src= img/P3 . png img ID= P4 class= src src= P4 . png img ID= P5 class= src src= img/P5 . png script//为源对象添加事件侦听器3354记录哪个源对象varsrclist=document.queryselectora//查找(var i=0的所有img元素；isrcList.lengthI ){ //遍历img元素var p=src list[I]；P.ondragstart=function(e){ //开始拖动源对象e . data transfer . setdata( plane id ，this . id)；//保存数据-这个img元素的ID } p . on drage=function(){ } p . on dragend=function(){ }//为目标对象添加事件监控3354删除拖动的源对象trash。ondragenter=function(){//源对象进入目标对象console.log(drag enter )。trash . style . opacity= 1 ；//在源对象离开目标对象后，将透明度更改为1 } trash . ondragleave=function(){//console . log( drag leave )；trash . style . opacity=" . 2 "；//当源对象悬停在目标对象上时，将透明度更改为0.2 } trash . ondragover=function(e){//e . prevent default()；//阻止默认行为，使drop可以触发} trash.ondrop=function(e){ //源对象松手，释放目标对象中的console . log( drop )；trash . style . opacity=" . 2 "；//透明度改为0.2 //删除拖动的源对象var id=e . data transfer . get data( plane id )；//get data - id值var p=document . getelementbyid(id)；//根据id值找到相关元素p . parent node . remove child(p)；//从父元素中删除子节点} /script /body /html效果如下：

　　将小飞机拖到垃圾桶并删除它：

　　如图，原来的三架小飞机现在变成了两架！

　　六、拖拽API的补充知识点！！（重要，面试中也许会问到噢！！）

　　面试问题：

　　如何在网页中显示客户端(电脑)的图片？

　　如何在服务器端拖动客户端的网页显示在下载的页面中？

　　这两个问题是什么意思？

　　我们一般都是从电脑上拖拽一张图片到浏览器上实现下载操作！按照H5之前的标准，直接将图片拖放到浏览器中进行显示是不可能的！但是自从H5新功能出来后，增加了拖拽API的功能，完美的实现了这个功能！

　　应用场合：

　　在一个网站上，上传图片作为头像。

　　上传照片.

　　HTML5新文件操作对象：

　　File:表示一个文件对象。

　　File:表示一个FileList对象，类数组。

　　FileReader:用于从文件中读取数据。

　　FileWriter:用于将数据写入文件。

　　相关函数：

　　div . ondrop=function(e){ var f=e . data transfer . files[0]；//找到拖放的文件var fr=new FileReader()；//创建一个文件读取器fr . readasurldata(f)；//读取文件内容fr.onload=function(){ //读取完成img . src=fr . result；//使用读取的数据}}代码如下：

　　span style= font-size:18px；！DOCTYPE html html head lang= en meta charset= UTF-8 title/title style # container { border:1px solid # AAA；边框半径：3px填充：10px边距：10px最小高度：400px} /style /head body h1拖拽API扩展知识/h1 h3请把你的照片拖拽到下框区域/H3 div ID= container /div script//监听文档3354的drop事件取消其默认行为：打开图片document . ondragover=function(e){ e . prevent default()；//Make the drop event trigger } document . ondrop=function(e){ e . prevent default()；//防止图片在新窗口打开，否则下载操作仍会执行！}//监听div #容器的drop事件，尝试读取释放的图片数据，显示container . ondragover=function(e){ e . prevent default()；} container . ondrop=function(e){ console . log(客户端拖动了一张图片并发布.)//当前目标对象读取拖放源对象//console.log(e.dataTransfer)存储的数据；//显示//console . log(e . data transfer . files . length)有问题；//var F0=e . data transfer . files[0]中拖动的图片数；//console . log(F0)；//File对象File //从File对象读取数据var fr=new File reader()；//fr . reada stext(F0)；//从文件中读取文本字符串fr . readasdataurl(F0)；//从文件中读取URL数据fr . onload=function(){ console . log(读取文件完成)console . log(fr . result)；var img=new Image()；img . src=fr . result；//URL数据容器. appendchild(img)；}} /script /body /html/span具有以下效果：

　　总结

　　以上是边肖介绍的HTML5拖拽API的经典例子的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。