·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5拖放(Drag 和 drop)应用代码

时间:2017-08-14 14:39www.w3school.com.cn
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

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

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释:在 Safari 5.1.2 中不支持拖放。

HTML5 拖放实例

下面的例子是一个简单的拖放实例:

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <script type="text/javascript"> 
  5. function allowDrop(ev) 
  6. ev.preventDefault(); 
  7.  
  8. function drag(ev) 
  9. ev.dataTransfer.setData("Text",ev.target.id); 
  10.  
  11. function drop(ev) 
  12. ev.preventDefault(); 
  13. var data=ev.dataTransfer.getData("Text"); 
  14. ev.target.appendChild(document.getElementById(data)); 
  15. </script> 
  16. </head> 
  17. <body> 
  18.  
  19. <div id="div1" ondrop="drop(event)" 
  20. ondragover="allowDrop(event)"></div> 
  21. <img id="drag1" src="img_logo.gif" draggable="true" 
  22. ondragstart="drag(event)" width="336" height="69" /> 
  23.  
  24. </body> 
  25. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器