|
阅读：3961回复：0
div拖动改变大小,拖动DIV改变div大小
<!DOCTYPE html>
<html> <head> <title></title> <style type="text/css"> .outer{ width: 100px; height:200px; border:2px solid red; } .inner{ width:100%; height:100%; /*border:1px solid #000;*/ } .outer:hover{ cursor: s-resize; } .inner:hover{ cursor: default; } </style> </head> <body> <div id="moveBarBox" class="outer" onmousedown="startDrag()"> <div class="inner" > </div> </div> <script type="text/javascript"> var finalheight = 200,finalwidth = 200; //最后的高度 var he = 200,wi = 200; //初始高度 var dragable = false;//默认不可拖拽 var oldY = '';//记录第一次的鼠标位置 var oldX = '';//记录第一次的鼠标位置 var startDrag = function(event){ dragable = true; var e=event?event:window.event; oldY = e.pageY; oldX = e.pageX; //记录第一次的鼠标位置 }; var unDrop = function(){ dragable = false; window.event? window.event.cancelBubble = true : e.stopPropagation(); }; var endDrop = function(){ if(dragable){ finalheight = he; finalwidth = wi; dragable = false; }; }; document.onmouseup=function(){ endDrop(); }; document.onmousemove=function(event){ if(dragable){ var e=event?event:window.event; box = document.getElementById('moveBarBox'); console.log(box); he = e.pageY - oldY + parseInt(finalheight); wi = e.pageX - oldX + parseInt(finalwidth); //鼠标的位移 + div的最后高度 = div的新高度 //向上拉 he = oldY - e.pageY + parseInt(finalheight); //向下拉 he = e.pageY - oldY + parseInt(finalheight); if(dragable){ if(he<120 || he==120){//div最低高度 box.style.height = '120px';he = '120px'; return; } if(he>400 || he==400){//div最高高度 box.style.height = '400px';he = '400px';return; } box.style.height = he + 'px'; box.style.width = wi + 'px'; }; }; }; </script> |
|
