JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍JS实现兼容各种浏览器的获取选择文本的方法【测试可用】，包括了JS实现兼容各种浏览器的获取选择文本的方法【测试可用】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧
-
本文向大家介绍JS实现兼容各浏览器解析XML文档数据的方法，包括了JS实现兼容各浏览器解析XML文档数据的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法。分享给大家供大家参考。具体分析如下： 网站上很多用JS解析XML文档的资料或多或少都有点问题， 以下是自己总结的代码，用来解析XML文档，兼容各个浏览器。 parseXMLDOM.js代码
-
本文向大家介绍js与jQuery实现的兼容多浏览器Ajax请求实例，包括了js与jQuery实现的兼容多浏览器Ajax请求实例的使用技巧和注意事项，需要的朋友参考一下 ajax我们经常会用到的，但网上找到的大部份ajax兼容性都不强，下面自己改了一个不错的兼容性很强的ajax函数，同时后面介绍的jquery ajax 兼容性也很强。 一、纯js实现的Ajax实例： 二、jQuery $.ajax概
-
本文向大家介绍jQuery+css实现的时钟效果(兼容各浏览器)，包括了jQuery+css实现的时钟效果(兼容各浏览器)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+css实现的时钟效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 这里没有做太多的修饰，简单的实现了一下功能，另外，用的是js的setTimeout方法，当时间长了之后，会有一定的延时，建议，在每隔
-
本文向大家介绍JS+HTML5实现上传图片预览效果完整实例【测试可用】，包括了JS+HTML5实现上传图片预览效果完整实例【测试可用】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+HTML5实现上传图片预览效果。分享给大家供大家参考，具体如下： 在项目中遇到用input标签file类型的文件上传，想实在上传之前进行图片的预览功能；之前的做的一个解决方案是文件先上传上去然后返回地址再
-
本文向大家介绍JS 实现 ajax 异步浏览器兼容问题，包括了JS 实现 ajax 异步浏览器兼容问题的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴代码了，具体代码如下所示： 以上所述是小编给大家介绍的JS 实现 ajax 异步浏览器兼容问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！