<!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>
<title>div的拖拽</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.div1
{
position:absolute;
border:1px solid #000;
width:200px;
height:100px;
margin:10px;
}
</style>
<script type="text/javascript">
var div_x,div_y;
function init() {
var btn = document.getElementById("btn");
if(window.attachEvent){
btn.attachEvent("onmousedown", mouseDown);
btn.attachEvent("onmouseup", mouseUp);
}
else
{
btn.addEventListener("mousedown", mouseDown, false);
btn.addEventListener("mouseup", mouseUp, false);
}
}
function mouseDown(e) {
var e=window.event||e;
var obj = document.getElementById("ad");
var target = e.srcElement || e.target;
target.setCapture();
div_x=(e.x?e.x:e.pageX)-parseInt(obj.style.left,10);
div_y=(e.y?e.y:e.pageY)-parseInt(obj.style.top,10);
if(window.attachEvent)
{
target.attachEvent("onmousemove", mouseMoved);
}
else
{
target.addEventListener("mousemove", mouseMoved);
}
}
function mouseUp(e) {
var e=window.event||e;
var target = e.srcElement || e.target;
target.releaseCapture();
if(window.attachEvent)
{
target.detachEvent("onmousemove", mouseMoved);
}
else
{
target.removeEventListener("mousemove", mouseMoved, false);
}
}
function mouseMoved(e) {
var e=window.event||e;
var obj = document.getElementById("ad");
var flag;
if(navigator.appName == 'Microsoft Internet Explorer')
{
flag=1;
}
else
{
flag=0;
}
if(e.button==flag)
{
//alert("clinetLeft="+obj.clientLeft+";offsetLeft="+obj.offsetLeft);
divX=obj.clientLeft;
divY=obj.clientTop
obj.style.left=divX+(e.x?e.x:e.pageX)-div_x+"px";
obj.style.top=divY+(e.y?e.y:e.pageY)-div_y+"px";
if(parseInt(obj.style.left,10)+obj.offsetWidth>=document.documentElement.clientWidth)
{
obj.style.left=(document.documentElement.clientWidth-obj.offsetWidth)+"px";
}
}
}
</script>
</head>
<body onload="init();">
<div class="div1" style="top:200px;left:200px" id="ad">
<div id="btn" style="width:200px;height:30px;cursor:move; background-color:red">
</div>
<div>
内容在这里内容在这里
内容在这里内容在这里
内容在这里内容在这里
</div>
</div>
<table><tr><td height="1220"></tr></tr></table>
</body>
</html>
