实现代码如下
js：
- JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var params={
left:0,
right:0,
currentX:0,
currentY:0,
flag:false
};
var getCss=function(o,key){
return o.currentStyle? o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key];
}
var startDrag=function(bar, target){
if(getCss(target,'left')!==auto){//getCss(target,'left')!==auto)这句是什么意思啊？
params.left=getCss(target,'left'); //记录整体的这一块的位置
}
if(getCss(target,'top')!==auto){
params.top=getCss(target,'top'); //记录整体的这一块的位置
}
bar.onmousedown=function(event){
params.flag=true; //类似的打开开关的感觉。
var e=event; //将鼠标这值给一个变量。
params.currentX=e.clientX;//记录按下时鼠标指针位置相对于窗口客户区域的 x 坐标
params.currentY=e.clientY;
}
bar.onmouseup=function(event){
params.flag=false;
if(getCss(target,'left')!==auto){
params.left=getCss(target,'left'); //记录下鼠标松开时的盒型的位置。
}
if(getCss(target,'top')!==auto){
params.left=getCss(target,'top');
}
}
bar.onmouseover=function(event){
var e = event ? event: window.event;//这句什么意思啊？
if(params.flag){
var nowX=e.clientX;//记录鼠标按下时这个过程的鼠标位移,这个判断语句会让nowX到鼠标松开才不记录，所以这个值最后记录的是，松开的鼠标的值
var nowY=e.clientY;
var disX= e.clientX-params.currentX;
var disY= e.clientY-params.currentY;
target.style.left=parseInt(params.currentX)+disX+'px';
target.style.top=parseInt(params.currentY)+disY+'px';
}
}
};
window.onload = function(){
var oBox = document.getElementById("box");
var oBar = document.getElementById("bar");
startDrag(oBar, oBox);}
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; //这里为什么改成点就不行。
//document.defaultView.getComputedStyle 这是w3c标准方法，取得元素的样式信息，因为有些样式是在外部css文件定义的，所以用element.style是取不到的 如果是IE,可以用 element.currentStyle["name"]
};
//拖拽的实现
var startDrag = function(bar, target){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
//防止IE文字选中
bar.onselectstart = function(){
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
}
bar.onmouseup = function(){
params.flag = false;
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
}
document.onmousemove = function(event){//这里跟写bar.onmousemove 有什么区别呢？
var e = event ? event: window.event;
if(params.flag){
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
}
}
};
window.onload = function(){
var oBox = document.getElementById("box");
var oBar = document.getElementById("bar");
startDrag(oBar, oBox);}
</script>
<style>
#box{
position:absolute;
left:50px;
top:150px;
padding:5px;
background:#f0f3f9; font-size:12px;
-moz-box-shadow:2px 2px 4px #666666;
-webkit-box-shadow:2px 2px 4px #666666;
}
#main
{
border:1px solid #a0b3d6;
background:white;
}
#bar{
line-height:24px;
border-bottom:1px solid #a0b3d6;
padding-left:5px;
cursor:move;
}
#content{
width:420px;
height:250px;
padding:10px 5px;
background:#F7F7F7;
}
</style>
</head>
<body>
<div id="box">
<div id="main">
<div id="bar">拖拽</div>
<div id="content">
内容……
</div>
</div>
</div>
</body>
</html>