手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
摘要:本文实例讲述了JS实现兼容各种浏览器的高级拖动方法。分享给大家供大家参考,具体如下:高级拖动#toBeDraged{width:100px;...

本文实例讲述了JS实现兼容各种浏览器的高级拖动方法。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>高级拖动</title> <style> #toBeDraged{ width:100px; height:100px; line-height:100px; border:1px solid red; position:absolute; text-align:center; font-family:Arial, Helvetica, sans-serif; cursor:move; } </style> <script type= "text/javascript"> window.onload = function(){ doDrag(); } function doDrag(){ var div = document.getElementById("toBeDraged"); var posx; var posy; div.onmousedown = function(e){ var e = e || window.event; if (div.setCapture) { div.setCapture(); } posx = e.clientX - parseInt(div.offsetLeft); posy = e.clientY - parseInt(div.offsetTop); document.onmousemove = function(ev){ var ev = ev || window.event;//如果是IE if (ev.setcapture) { } div.style.left = (ev.clientX - posx)+"px"; div.style.top = (ev.clientY - posy)+"px"; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; if (div.releaseCapture) { div.releaseCapture(); } } } } </script> </head> <body> <div id = "toBeDraged">你拖我啊!</div> </body> </html>

希望本文所述对大家JavaScript程序设计有所帮助。

【JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】】相关文章:

JS实现简洁、全兼容的拖动层实例

Jquery实现动态切换图片的方法

JS+CSS实现的拖动分页效果实例

js实现从右向左缓缓浮出网页浮动层广告的方法

javascript实现行拖动的方法

JS实现1000以内被3或5整除的数字之和

Javascript实现的SHA-256加密算法完整实例

JavaScript实现的MD5算法完整实例

javascript实现可拖动变色并关闭层窗口实例

JavaScript实现斗地主游戏的思路

精品推荐
分类导航