HTML5中怎样完成照片的拖拽

摘要: HTML5中怎样完成照片的拖拽|频道:HTML5|点一下: 次event.dataTransfer.setData( Text ,event.target.id);}(3) 将原素拖拽到特定部位(放)默认设置状况下没法将原素拖拽放进另外一个部位,因而必...

HTML5中怎样完成照片的拖拽 |频道:HTML5|点一下: 次 event.dataTransfer.setData( Text ,event.target.id); }

(3) 将原素拖拽到特定部位(放)

默认设置状况下没法将原素拖拽放进另外一个部位,因而必须撤销默认设置恶性事件,必须采用preventDefault()方式

在其中 setData()方式指被拖数据信息的数据信息种类和值

appendChild() 方式从一个原素向另外一个原素中移动原素。

function drop(event) event.preventDefault();//撤销访问器的默认设置个人行为 var data=event.dataTransfer.getData( Text //获得特定文件格式的数据信息 event.target.appendChild(document.getElementById(data)); }

详细编码

body div id= box ondrop= drop(event) ondragover= allowDrop(event) /div img src= images/1.jpg id= drag1 draggable= true ondragstart= drag(event) script function allowDrop(event) event.preventDefault();//撤销恶性事件默认设置个人行为 function drag(event){ event.dataTransfer.setData( Text ,event.target.id) function drop(event){ event.preventDefault(); var data=event.dataTransfer.getData( text event.target.appendChild(document.getElementById(data)) /script


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503