JavaScript example: 拖动层Div

1 一个简单的例子:拖动层Div
  摘自:http://lovephoenix.iteye.com/blog/110165
JavaScript example: 拖动层Div_第1张图片
<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>


JavaScript example: 拖动层Div_第2张图片

你可能感兴趣的:(JavaScript,qq,Blog)