视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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. { 
  7. ev.preventDefault(); 
  8. } 
  9.  
  10. function drag(ev) 
  11. { 
  12. ev.dataTransfer.setData("Text",ev.target.id); 
  13. } 
  14.  
  15. function drop(ev) 
  16. { 
  17. ev.preventDefault(); 
  18. var data=ev.dataTransfer.getData("Text"); 
  19. ev.target.appendChild(document.getElementById(data)); 
  20. } 
  21. </script> 
  22. </head> 
  23. <body> 
  24.  
  25. <div id="div1" ondrop="drop(event)" 
  26. ondragover="allowDrop(event)"></div> 
  27. <img id="drag1" src="img_logo.gif" draggable="true" 
  28. ondragstart="drag(event)" width="336" height="69" /> 
  29.  
  30. </body> 
  31. </html> 

 

热门文章推荐

请稍候...

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

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