<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
div{width:100px;height:100px;font:bold 20px Arial;margin:50px;}
#div1{background:red;position:absolute;left:0;top:0;}
#div2{background:blue;margin-top:200px;overflow:hidden;}
#div3{background:green;position:absolute;left:0;top:450px;z-index:50;}
#div4{background:orange;}
.chromeOnselectstart{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}
</style>
<script>
/*
*常用document.onmousemove做的一些事情
*The time of writing：2013-4-11
*written by：吴志强
*/
window.onload = function ()
{
var oTxt = document.getElementById("txt1");
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
var oDiv4 = document.getElementById("div4");
oDiv1.onmousedown = function (e) {
/*把对象在鼠标onmousedown时的所有属性保存下来,包括鼠标的X,Y坐标
*oDiv1为被操作对象，可以与触发onmousedown的对象不为同一个
*把 oDiv1.onmousedown 改成oDiv3.onmousedown测试效果
*/
var e = e || event;
oDiv1.X = e.clientX;
oDiv1.Y = e.clientY;
setAttr(oDiv1, ['left', 'top']);
document.onmousemove = function (ev)//执行鼠标拖动动作
{
if (document.all) //鼠标拖动时禁止浏览器选中效果
{//ie
document.body.onselectstart = new Function("return false");
}
else
{
document.body.className = "chromeOnselectstart";
}
mouseMove(oDiv1, ['left', 'top'], ev, function (){//回调函数,这个参数也可以不放
oTxt.value = "div1的left为：" + oDiv1.style.left + " \ndiv1的top为：" + oDiv1.style.top;
});//鼠标拖动时执行函数
}
}
// oDiv1.onmousedown = function (e) {
// /*把对象在鼠标onmousedown时的所有属性保存下来,包括鼠标的X,Y坐标
// *oDiv1为被操作对象，可以与触发onmousedown的对象不为同一个
// *把 oDiv1.onmousedown 改成oDiv3.onmousedown测试效果
// */
// var e = e || event;
// oDiv1.X = e.clientX;
// oDiv1.Y = e.clientY;
// setAttr(oDiv1, ['left', 'top']);
// oDiv2.X = e.clientX;
// oDiv2.Y = e.clientY;
// setAttr(oDiv2, ['width', 'height']);
// document.onmousemove = function (ev)//执行鼠标拖动动作
// {
// if (document.all) //鼠标拖动时禁止浏览器选中效果
// {//ie
// document.body.onselectstart = new Function("return false");
// }
// else
// {
// document.body.className = "chromeOnselectstart";
// }
// mouseMove(oDiv1, ['left', 'top'], ev, function (e){//回调函数,这个参数也可以不放
// mouseMove(oDiv2, ['width', 'height'], ev);
// });//鼠标拖动时执行函数
// }
// }
oDiv2.onmousedown = function (e) {
var e = e || event;
oDiv2.X = e.clientX;
oDiv2.Y = e.clientY;
setAttr(oDiv2, ['width', 'height']);
document.onmousemove = function (ev)
{
if (document.all)
{//ie
document.body.onselectstart = new Function("return false");
}
else
{
document.body.className = "chromeOnselectstart";
}
mouseMove(oDiv2, ['width', 'height'], ev);
}
}
document.onmouseup = function () {//释放鼠标时清除mousemove时间，浏览器恢复可选中
document.onmousemove = null;
document.body.className = "";
}
}
function setAttr(obj, aAttr)
{//把obj的aAttr各属性保存下来,aAttr为数组 执行方法如setAttr(oDiv1, ['left', 'top']);
if (obj.currentStyle)
{//IE浏览器
for (var i=0; i<aAttr.length; i++)
{
var attr = aAttr[i];
obj[attr] = parseInt(obj.currentStyle[attr]);
}
}
else
{
for (var i=0; i<aAttr.length; i++)
{
var attr = aAttr[i];
obj[attr] = parseInt(getComputedStyle(obj, false)[attr]);
}
}
}
function mouseMove(obj, aAttr, e, fn)
{
/*鼠标拖动执行事件,使用方法：
mouseMove(oDiv1, ['left', 'top'], ev, function (){//回调函数,这个参数也可以不放
alert(1);
});
obj为被操作对象,aAttr为要改变的属性,为数组, e为传进来的浏览器对象, fn为每次执行mouseMove后再执行的函数
可以满足一些功能,具体功能就靠自己发掘啦，我就不说咯
你可以将上面被注释的oDiv1.onmousedown函数拿出来试试效果
*/
//获取mousemove时的X,Y坐标
var e = e || event;
e.X = e.clientX;
e.Y = e.clientY;
for (var i=0; i<aAttr.length; i++)
{
var attr = aAttr[i];
switch (attr)
{
case "left":
obj.style[attr] = obj[attr] + e.X-obj.X + "px";
break;
case "top":
obj.style[attr] = obj[attr] + e.Y-obj.Y + "px";
break;
case "width":
var w = obj[attr] + (e.X-obj.X);
w = w>0?w:0;
obj.style[attr] = w + "px";
break;
case "height":
var h = obj[attr] + (e.Y-obj.Y);
h = h>0?h:0;
obj.style[attr] = obj[attr] + e.Y-obj.Y + "px";
break;
}
}
if (fn)
{
fn();
}
}
</script>
</head>
<body>
<textarea name="" id="txt1"></textarea>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</body>
</html>