鼠标拖拽改变对象的属性,鼠标拖拽DIV移动
鼠标拖拽DIV移动,鼠标拖动改变DIV的宽高
<!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>