这两天没事干写了drag，弄了好久，主要是获取鼠标坐标，因为要兼容FF，所以遇到了不少问题，备忘一下
一、js获取坐标位置
1.1 首先是event，这个只有IE支持，FF不支持，所以如果FF里要用只能在函数上加多一个参数，例如function move(event)，这样就可以在函数里面用event了
1.2 获取坐标：event.X 和event.Y 这两个只支持IE，取出来值是相对父元素的位置
1.3 event.pageX 和event.pageY 这两个支持FF，不支持IE，同样取出来的值也是相对父元素的。
1.4 event.clientX 和event.clientY 支持FF,IE，不包含滚动条，所以要取具体相对浏览器的位置就得加上document.documentElement.scrollLeft
二、JQuery的东东
2.1 取某个ID的元素：$("#Frametop")
2.2 为某个ID添加方法 $("#Frametop").mousemove(move) move要添加的方法，$("#Frametop").mouseup(up)
jquery事件的一些总结：http://www.cnblogs.com/Clingingboy/archive/2008/02/14/1068908.html
2.3 取消事件绑定 $("#Frametop").unbind()
2.4 获取和设置样式 获取：$("#Frametop").css('align'); 设置 $("#Frametop").css({'align','left'});
2.5 源代码
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script typ="text/javascript" language="JavaScript">
var leftpx=0;
var toppx=0;
var left=0;
var tops=0;
function AddFrame(txt)
{
}
function Drag(event)
{
//为Frametop添加事件
$("#Frametop").mousemove(Move);
$("#Frametop").mouseup(Release);
$("#Frametop").css({'cursor':'move'});
var a = $("#Frametop");
if(!event) event = window.event;
//取出鼠标距离Frame边界的长度 Firefox
if(event.pageX||event.pageY)
{
leftpx = event.pageX-$("#Frame").css("left").replace('px','');
//alert(event.pageX);
toppx = event.pageY-$("#Frame").css("top").replace('px','');
}
else//ie
{
if(document.all)
{
var box = document.getElementById("Frame").getBoundingClientRect();
leftpx = event.clientX + document.documentElement.scrollLeft - box.left;
toppx = event.clientY + document.documentElement.scrollTop+20 - box.top;
//alert(leftpx);
}
else
{
leftpx = event.clientX + document.documentElement.scrollLeft - $("#Frame").css("left").replace('px','');
toppx = event.clientY + document.documentElement.scrollTop - $("#Frame").css("top").replace('px','');
alert(toppx);
}
}
//捕获事件，ie为setCapture,ff不支持该方法，所以用window.captureEvents
if(a.setCapture)
{
a.setCapture();
}
else if(window.captureEvents)
{
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
}
//鼠标移动方法
function Move(event)
{
//定义event
if(!event) event = window.event;
//取出当前鼠标位置，并算出Frame的位置
if(event.pageX||event.pageY)
{
left = event.pageX - leftpx;
tops = event.pageY - toppx;
}
else//ie
{
alert("abc");
left = event.clientX + document.documentElement.scrollLeft - leftpx;
tops = event.clientY+ document.documentElement.scrollTop-toppx;
}
//设置样式
$("#Frame").css({'left':left});
$("#Frame").css({'top':tops});
}
//mouseup事件
function Release()
{
var frametop = $("#Frametop");
//释放捕捉，IE为releaseCapture
if(frametop.releaseCapture)
{
frametop.releaseCapture();
}
else if(window.captureEvents)
{
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
var d = document;
d.onmousemove = null;
d.onmouseup = null;
}
//取消事件绑定
frametop.unbind();
$("#Frametop").css({'cursor':'auto'});
}
</script>
</head>
<body>
<div id="Main">
<div id="Head">
<input type="button" value="新建窗口" onclick="AddFrame(sth)" />
</div>
<div id="Contain">
<div id="Frame">
<div id="Frametop" onmousedown="Drag(event)">Title</div>
<div id="FrameContain">
</div>
</div>
</div>
</div>
</body>
</html>
CSS文件
Codebody
{
margin:0;
padding:0;
font-size:small;
}
#Main
{
width:100%;
}
#Head
{
width:100%;
height:50px;
padding-top:40px;
border-bottom:dotted black 1px;
}
#Contain
{
width:100%;
}
#Frame
{
margin-top:20px;
position:absolute;
}
#Frametop
{
display:block;
background-color:#ebffff;
border:solid 1px #0c90c4;
height:20px;
width:250px;
}
#FrameContain
{
height:250px;
width:250px;
border:solid 1px #0c90c4;
border-top:none;
}
开始上班，以后要多点总结才行，嘿嘿~~