JavaScript example: 拖动层Div

pouyang

浏览: 321665 次
性别:
来自: 北京

最近访客更多访客>>

vliu

songhait

liuminghan0617

daotadefeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript QQ Blog

1 一个简单的例子:拖动层Div
摘自:http://lovephoenix.iteye.com/blog/110165

<html>
<html>
<script>
var d=0
function find(qq){
	d=qq
	//offsetX:Sets or retrieves the x-coordinate of the mouse pointer's position 
	//        relative to the object firing the event
	x=event.offsetX
	y=event.offsetY
}
function dragit(){
	if(d==0)return false
	else{
		//pixelLeft:Sets or retrieves the left position of the object
		//scrollLeft:Sets or retrieves the distance between the left edge of the object 
		//           and the leftmost portion of the content currently visible in the window. 
		//scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离,（对象与窗口,非客户区域）测试的时候一直是0。
		//clientX:Sets or retrieves the x-coordinate of the mouse pointer's position
		//        relative to the client area of the window,
		//        excluding window decorations and scroll bars
		//clientX:设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
		// 窗口客户区域（指div）
		d.style.pixelLeft=document.body.scrollLeft+event.clientX-x
		d.style.pixelTop=document.body.scrollTop+event.clientY-y
	}
}
</script>

<body style="margin: 0" onmousemove="dragit()" onmouseup="d=0">
<div id=aa
	style="width: 100pt; height: 100pt; background: red; position: absolute"
	onmousedown="if(event.button==1)find(aa)"></div>
</body>
</html>

分享到：

2009 为什么待到毕业时? | 2010年2月10，腊月27，公司的最后一天班

2010-02-21 13:16
浏览 1080
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript example: 拖动层Div

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript example: 拖动层Div

评论

发表评论

相关推荐

可输入的下拉框，兼容IE6，7，8，9

JS Web前段性能问题

JS body.clientWidth,documentElement.clientWidth,clientX

自写 js validation 验证框架

JS jquery ajax post html

JS jquery自动补全

JS jquery常用语法

JS 过滤特殊字符

JS 注册监听

JS Jquery 锁屏

JS 判断是否IE浏览器

JS event获取触发事件的对象

JS js控制鼠标左右键和复制粘贴事件

JS js控制select多选

JS 转换函数和属性定义范围

JS 加码解码

JS 定时任务setTimeout与setInterval

JS 框架跳转

JS prototype例子原型与继承

JS 获得当前实时日期和时分秒星期 日期比较 当前日期格式化

最近访客更多访客>>

JS 获得当前实时日期和时分秒星期日期比较当前日期格式化