DIV固定在页面的某个位置,不可拖拽
位于页面左边,鼠标点击且移动,向右移拉大,向左移缩小:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DIV位于页面左边,点击鼠标且左右移动可改变其宽度</title> <style type="text/css"> .box{ width: 100px; height:200px; border:2px solid red; position: absolute; top: 10px; left: 10px; cursor: e-resize; } .sonBox{ width:100%; height:100%; cursor: default; } </style> </head> <body> <div id="box" class="box" onmousedown="startDrag()" > <div class="sonBox" > </div> </div> <script type="text/javascript"> var finalWidth = 100; //最后的宽度 var wi = 100; //初始宽度 var dragable = false;//默认不可拖拽 var oldW = '';//记录第一次的鼠标位置 var startDrag = function(event){ dragable = true; var e=event?event:window.event; oldW = e.pageX; //记录第一次的鼠标位置 //鼠标松开 document.onmouseup=function(){ if(dragable){ finalWidth = wi; dragable = false; }; }; //鼠标指针移动 document.onmousemove = function(event){ if(dragable){ var e=event?event:window.event; var box = document.getElementById('box'); wi = e.pageX - oldW + parseInt(finalWidth); if(wi<100 || wi==100){//div最低宽度 box.style.width = '100px';wi = '100px'; return; } if(wi>400 || wi==400){//div最高宽度 box.style.width = '400px';wi = '400px'; return; } box.style.width = wi + 'px'; }; }; }; </script> </body> </html>
位于页面右边,鼠标点击且移动,向右移缩小,向左移拉大:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DIV位于页面右边,点击鼠标且左右移动可改变其宽度</title> <style type="text/css"> .box{ width: 100px; height:200px; border:2px solid red; position: absolute; top: 10px; right: 10px; cursor: e-resize; } .sonBox{ width:100%; height:100%; cursor: default; } </style> </head> <body> <div id="box" class="box" onmousedown="startDrag()" > <div class="sonBox" > </div> </div> <script type="text/javascript"> var finalWidth = 100; //最后的宽度 var wi = 100; //初始宽度 var dragable = false;//默认不可拖拽 var oldW = '';//记录第一次的鼠标位置 var startDrag = function(event){ dragable = true; var e=event?event:window.event; oldW = e.pageX; //记录第一次的鼠标位置 //鼠标松开 document.onmouseup=function(){ if(dragable){ finalWidth = wi; dragable = false; }; }; //鼠标指针移动 document.onmousemove = function(event){ if(dragable){ var e=event?event:window.event; var box = document.getElementById('box'); wi = oldW - e.pageX + parseInt(finalWidth); if(wi<100 || wi==100){//div最低宽度 box.style.width = '100px';wi = '100px'; return; } if(wi>400 || wi==400){//div最高宽度 box.style.width = '400px';wi = '400px'; return; } box.style.width = wi + 'px'; }; }; }; </script> </body> </html>
位于页面上边,鼠标点击且移动,向上移缩小,向下移拉大:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DIV位于页面上边,点击鼠标且上下移动可改变其高度</title> <style type="text/css"> .box{ width: 200px; height:100px; border:2px solid red; position: absolute; top: 10px; left: 10px; cursor: s-resize; } .sonBox{ width:100%; height:100%; cursor: default; } </style> </head> <body> <div id="box" class="box" onmousedown="startDrag()" > <div class="sonBox" > </div> </div> <script type="text/javascript"> var finalHeight = 100; //最后的高度 var he = 100; //初始高度 var dragable = false;//默认不可拖拽 var oldW = '';//记录第一次的鼠标位置 var startDrag = function(event){ dragable = true; var e=event?event:window.event; oldW = e.pageY; //记录第一次的鼠标位置 document.onmouseup = function(){ if(dragable){ finalHeight = he; dragable = false; }; }; document.onmousemove = function(event){ if(dragable){ var e=event?event:window.event; var box = document.getElementById('box'); he = e.pageY - oldW + parseInt(finalHeight); if(he<100 || he==100){//div最低高度 box.style.height = '100px';he = '100px'; return; } if(he>400 || he==400){//div最高高度 box.style.height = '400px';he = '400px'; return; } box.style.height = he + 'px'; }; }; }; </script> </body> </html>
位于页面下边,鼠标点击且移动,向上移拉大,向下移缩小:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DIV位于页面下边,点击鼠标且上下移动可改变其高度</title> <style type="text/css"> .box{ width: 200px; height:100px; border:2px solid red; position: absolute; bottom: 10px; left: 10px; cursor: s-resize; } .sonBox{ width:100%; height:100%; cursor: default; } </style> </head> <body> <div id="box" class="box" onmousedown="startDrag()" > <div class="sonBox" > </div> </div> <script type="text/javascript"> var finalHeight = 100; //最后的高度 var he = 100; //初始高度 var dragable = false;//默认不可拖拽 var oldW = '';//记录第一次的鼠标位置 var startDrag = function(event){ dragable = true; var e=event?event:window.event; oldW = e.pageY; //记录第一次的鼠标位置 document.onmouseup = function(){ if(dragable){ finalHeight = he; dragable = false; }; }; document.onmousemove = function(event){ if(dragable){ var e=event?event:window.event; var box = document.getElementById('box'); he = oldW - e.pageY + parseInt(finalHeight); if(he<100 || he==100){//div最低高度 box.style.height = '100px';he = '100px'; return; } if(he>400 || he==400){//div最高高度 box.style.height = '400px';he = '400px'; return; } box.style.height = he + 'px'; }; }; }; </script> </body> </html>