最近一个需求，需要div的拖动，经过高手提示，用jquery的$（"#DivId"）.drageable();可以实现。自己按照网上写了一个。代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.winFrame{
position:absolute;
border: outset gray 1px;
height:400;
width:500;
}
.winTitle{
position:absolute;
border-bottom:1px solid black;
background-color: background;
width:100%;
height:20px;
cursor:move;
}
.winContent{
position:absolute;
top:30px;
width:100%
padding: 10px;
overflow: auto;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
var a=true;
function beginDrag(elem,event){
var deltaX = event.clientX - parseInt(elem.style.left);
var deltaY = event.clientY - parseInt(elem.style.top);
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
a=true;
function moveHandler(e){
if(a){
if(!e)
e = window.event;
elem.style.left = (e.clientX - deltaX) + "px";
elem.style.top = (e.clientY - deltaY) + "px";
e.cancelBubble = true;
}
}
function upHandler(e){
if(!e)
e = window.event;
a=false;
}
}
</SCRIPT>
</HEAD>
<div class=winFrame style="left:50px;top:50px;">
<div class=winTitle onmousedown="beginDrag(this.parentNode,event);"> 标题 </div>
<div class=winContent>
内容
</div>
</div>
<BODY>
</BODY>
</HTML>
posted on 2011-07-15 17:03
杨文胜 阅读(381)
评论(0) 编辑 收藏