<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('box1');
//console.info(getPos(oDiv).leftX);//测试可以
//三个事件
//兼容性没有做判断
//通过以下两种可实现ie7及以下浏览器的兼容
//setCapture全局捕获 再释放捕获
//return false
//以前两种可实现兼容性问题，并没有用浏览器做兼容实验 所用版本，chrome 40几来着记不清了
//也可做函数封装drag
oDiv.onmousedown=function(){
//当触发鼠标down事件时才能触发其它两事件
var e=window.event||evt;
var disX=e.clientX-getPos(oDiv).leftX;
var disY=e.clientY-getPos(oDiv).topY;
//oDiv.onmousemove拖快了会出现bug，调下就知道
document.onmousemove=function(evt){
var e=window.event||evt;
//限定拖的范围
//磁性吸引 当靠近左边框100内自动跑到左边
var L=e.clientX-disX;
var T=e.clientY-disY;
if(T<0){
T=0;
}
if(L<100){
L=0;
}
oDiv.style.left=L+'px';
oDiv.style.top=T+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
};
//封装一个获得绝对位置的函数
function getPos(obj){
var pos={
"leftX":0,
"topY":0
};
while(obj){
pos.leftX+=obj.offsetLeft;
pos.topY+=obj.offsetTop;
obj=obj.offsetParent;
}
return pos;
}
</script>
<style>
#box1{width:100px;height:100px;background:#C33;position:absolute;}
</style>
</head>
<body>
<div id='box1'>
</div>
</body>
//到此结束
分享到：
相关推荐
主要给大家介绍了关于在firefox浏览器下如何利用javascript实现拖动层效果，以及其中的原理分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面来一起看看吧
主要介绍了JavaScript使用面向对象实现的拖拽功能,结合实例形式详细分析了javascript基于面向对象的拖拽功能实现思路、原理与具体操作技巧,需要的朋友可以参考下
本文主要介绍了JavaScript实现拖拽改变元素大小的原理及具体实例分析，具有很好的参考价值，需要的朋友一起来看下吧
如果这样分析，将会使分析拖放事件变得更加容易。 拖放事件 API 中有八个拖放事件可以用在我们程序中。 drag：可拖动的项目被拖动 dragstart：开始拖动可拖动元素 dragend：拖动结束（例如放开鼠标）
3.10.3 功能实现 3.10.4 代码分析 3.11 本章小结 第4章 jquery中的事件与应用 4.1 事件机制 4.2 页面载入事件 4.2.1 ready（）方法的工作原理 4.2.2 ready（）方法的几种相同写法 4.3 绑定事件 ...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...
运算表达式类的原理及其实现 #实现的18位身份证格式验证算法 身份证15To18 的算法(C#) 一组 正则表达式 静态构造函数 忽略大小写Replace效率瓶颈IndexOf 随机排列算法 理解C#中的委托[翻译] 利用委托机制处理.NET中...
4.1.1 工作原理 / 82 4.1.2 库件使用流程 / 83 4.2 图片的加载与显示 / 84 4.2.1 图片显示举例 / 84 4.2.2 lbitmapdata对象 / 86 4.2.3 lbitmap对象 / 87 4.3 层的概念 / 88 4.4 使用lgraphics对象绘图 / 90...
此次将长期的思考、感悟，多年的系统开发、设计和团队管理经验，以及深入分析众多项目实战的宝贵成果和盘托出，力求将编程思想与具体实践融为一体，提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...
此次将长期的思考、感悟，多年的系统开发、设计和团队管理经验，以及深入分析众多项目实战的宝贵成果和盘托出，力求将编程思想与具体实践融为一体，提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...
Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText(); //得到服务器地址 ...
Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText(); //得到服务器地址 ...
百度云盘分享 ... Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText();...
Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText(); //得到服务器...
Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText(); //得到服务器...
Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText(); //得到服务器...
Java实现的FTP连接与数据浏览程序 1个目标文件 摘要:Java源码,网络相关,FTP Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 ...