用javascript做拖动层布局的思路
作者:亮亮 来源:亮亮博客 时间:2008-05-30 13:38:00
这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间,七拼八凑,总算是把这个效果写出来了。哎!还是js的功夫太差。因为是边找资料边写的,很多地方印象不深,时间一长,再重新写估计也难,所以把当时的思路记录一下!也希望大虾指点一下!
好了,转入正文,在开始之前先介绍几个功能函数!
1.格式化事件的函数
function getEvent(){
//同时兼容ie和ff的写法
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
2.取得鼠标的位置
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
3.得到元素的位置
function getPosition(ele){
var left = 0;
var top = 0;
while (ele.offsetParent){
left += ele.offsetLeft;
top += ele.offsetTop;
ele = ele.offsetParent;
}
left += ele.offsetLeft;
top += ele.offsetTop;
return {x:left, y:top};
}
首先,当然是写好初始布局的页面
查看演示一:drag1.html (7.33 KB)
标签:拖动,布局,javascript
0
投稿
猜你喜欢
关于交互设计在QQ秀赠送流程中的优化
2009-06-11 12:30:00
针对google Chrome的 CSS hacks
2009-11-30 12:45:00
使用AJAX的一个简单的例子
2007-09-21 17:55:00
asp查询xml的代码实现无刷新 模糊查询
2008-04-30 15:39:00
asp fso创建与删除文件与文件夹
2008-12-31 16:07:00
如何修改被表单引用的ASP页面?
2010-06-10 18:32:00
用正则替换所有URL
2009-03-13 13:51:00
asp程序运行速度测试
2008-02-11 19:11:00
一文带你搞懂PHP单例模式
2023-05-25 02:23:05
十几行的超简日历组件(兼容FF)js源码
2010-08-08 08:49:00
形成视觉冲击的几种方式
2008-08-03 15:57:00
asp让网站自动识别手机访问跳转至手机网站
2014-12-06 09:36:02
无法通过Google网站管理工具验证的部分情况解决办法
2009-07-28 12:56:00
ASP中Session技巧 默认过期时间为20分钟
2012-12-04 20:28:26
asp如何创建目录?
2009-11-14 20:51:00
MySQL的之表结构修改
2012-01-05 19:16:17
xhtml有哪些块级元素
2009-12-06 11:58:00
文档标准的真实谎言
2008-06-02 10:46:00
IE10增强对HTML5和CSS3的支持
2011-09-16 20:16:28
不成熟的标准化是我们唯一惧怕的
2008-08-15 18:55:00