全国服务热线:4008-888-888

技术知识

HTML5 拖放作用完成编码

在HTML5中,拖放是规范的1一部分,任何元素都可以拖放,实际內容以下

1、拖放 

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   
  6. </style>  
  7. <script>  
  8. function allowDrop(ev)   
  9. {   
  10. ev.preventDefault();   
  11. }   
  12. function drag(ev)   
  13. {   
  14. ev.dataTransfer.setData("Text",ev.target.id);   
  15. }   
  16. function drop(ev)   
  17. {   
  18. ev.preventDefault();   
  19. var data=ev.dataTransfer.getData("Text");   
  20. ev.target.appendChild(document.getElementById(data));   
  21. }   
  22. </script>  
  23. </head>  
  24. <body>  
  25. <p>拖拽 W3CSchool.cc 照片到矩形框框中:</p>  
  26. <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
  27. <br>  
  28. <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  
  29. </body>  
  30. </html>   

2、设定元素为可拖放
 
最先,以便使元素可拖拽,把 draggable 特性设定为 true :<img draggable="true">
 
3、拖拽甚么 - ondragstart 和 setData()
 
随后,要求当元素被拖拽时,会产生甚么。在上面的事例中,ondragstart 特性启用了1个涵数,drag(event),它要求了被拖拽的数据信息。dataTransfer.setData() 方式设定被拖数据信息的数据信息种类和值:

JavaScript Code拷贝內容到剪贴板
  1. function drag(ev)   
  2. {   
  3.    ev.dataTransfer.setData("Text",ev.target.id);   
  4. }    

在这个事例中,数据信息种类是 "Text",值是可拖拽元素的 id ("drag1")。
 
4、放到何处 - ondragover
 
ondragover 恶性事件要求在何处置放被拖拽的数据信息。默认设置地,没法将数据信息/元素置放到别的元素中。假如必须设定容许置放,大家务必阻拦对元素的默认设置解决方法。这要根据启用 ondragover 恶性事件的 event.preventDefault() 方式:event.preventDefault()
 
5、开展置放 - ondrop
 
 当置放被拖数据信息时,会产生 drop 恶性事件。在上面的事例中,ondrop 特性启用了1个涵数,drop(event):

JavaScript Code拷贝內容到剪贴板
  1. function drop(ev)   
  2. {   
  3. ev.preventDefault();   
  4. var data=ev.dataTransfer.getData("Text");   
  5. ev.target.appendChild(document.getElementById(data));   
  6. }    

编码解释:

启用 preventDefault() 来防止访问器对数据信息的默认设置解决(drop 恶性事件的默认设置个人行为是以连接方式开启)。根据 dataTransfer.getData("Text") 方式得到被拖的数据信息。该方式将回到在 setData() 方式中设定为同样种类的任何数据信息。被拖数据信息是被拖元素的 id ("drag1")。把被拖元素追加到置放元素(总体目标元素)中。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服