`
pouyang
  • 浏览: 313358 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript example: 拖动层Div

JavaScriptQQBlog 
阅读更多
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>




分享到：
| 2010年2月10，腊月27，公司的最后一天班
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics