1.
View 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>
<title></title>
<script type="text/javascript">
window.onload = function () {
var obj = g("divFile1");
var padx, pady, pad2x, pad2y;
obj.onmousedown = function () {
var e = window.event;
this.style.cursor = "move";
this.style.zIndex = 10000;
padx = e.clientX - this.offsetLeft;
pady = e.clientY - this.offsetTop;
}
obj.onmousemove = function () {
if (!padx) {
return;
}
var e = window.event;
this.style.left = e.clientX - padx - pad2x - g("divWrap").offsetLeft;
this.style.top = e.clientY - pady - pad2y - g("divWrap").offsetTop;
}
obj.onmouseup = function () {
this.style.cursor = "normal";
this.style.zIndex = 0;
padx = undefined;
}
}
function g(id) {
return document.getElementById(id);
}
</script>
</head>
<body style="margin:0; padding:0">
<div id="divWrap" style="background-color:#aabbff; height: 299px; 376px; margin:100px;">
<div id="divFile1" style="background-color:Aqua; position:relative; 54px; line-height: 44px; text-align:center;">文件1</div>
<div id="divCopy"
style="background-color:Aqua; 54px; line-height: 44px; text-align:center; position:absolute; top: 184px; left: 377px;">复制</div>
<div id="divDelete"
style="background-color:Aqua; 54px; line-height: 44px; text-align:center;position:absolute; top: 304px; left: 382px;">删除</div>
</div>
</body>
</html>
2.
View 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>
<title></title>
<script type="text/javascript">
window.onload = function () {
var obj = g("divFile1");
var padx, pady, maxx, minx, maxy, miny;
obj.onmousedown = function () {
var e = window.event;
this.style.cursor = "move";
this.style.zIndex = 10000;
padx = e.clientX - this.offsetLeft;
pady = e.clientY - this.offsetTop;
//最大和最小的拖动点
minx = g("divWrap").offsetLeft + padx;
maxx = g("divWrap").offsetLeft + g("divWrap").offsetWidth - (this.offsetWidth - padx);
miny = g("divWrap").offsetTop + pady;
maxy = g("divWrap").offsetTop + g("divWrap").offsetHeight - (this.offsetHeight - pady);
this.setCapture();
obj.onmousemove = function () {
var e = window.event;
var ex = e.clientX;
var ey = e.clientY;
//不能拖出边界
if (ex > maxx) {
ex = maxx;
} else if (ex < minx) {
ex = minx;
}
if (ey > maxy) {
ey = maxy;
} else if (ey < miny) {
ey = miny;
}
var x = ex - padx - g("divWrap").offsetLeft;
var y = ey - pady - g("divWrap").offsetTop;
this.style.left = x;
this.style.top = y;
}
obj.onmouseup = function () {
this.style.cursor = "normal";
this.style.zIndex = 0;
this.releaseCapture();
obj.onmousemove = null;
}
}
}
function g(id){
return document.getElementById(id);
}
</script>
</head>
<body style="margin:0; padding:0">
<div id="divWrap" style="background-color:#aabbff; height: 299px; 376px; margin:100px;">
<div id="divFile1" style="background-color:Aqua; position:relative; 54px; line-height: 44px; text-align:center;">文件1</div>
<div id="divCopy"
style="background-color:Aqua; 54px; line-height: 44px; text-align:center; position:absolute; top: 184px; left: 377px;">复制</div>
<div id="divDelete"
style="background-color:Aqua; 54px; line-height: 44px; text-align:center;position:absolute; top: 304px; left: 382px;">删除</div>
</div>
</body>
</html>