div拖动改变大小
1、问题1：在div的边框时改变鼠标的样式
问题2：如何改变div的高度
问题3：div设置最大最小值
--------------------------------------------------------------------
问题1：在div的边框时改变鼠标的样式
解决：用大div包着一个小的div，小的div长宽100%，大的div有边框。
大的div hover 样式为 cursor: s-resize;
小的div hover 样式为 cursor: default;
（全部代码在文末，记得投票）
HTML 代码如下：
CSS代码如下：
<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>
2、
问题2：如何改变div的高度
解决思路：
在大div border鼠标down时开启拖动，document监测鼠标move，
鼠标位移量 + 最后div大小 = div的大小
document监测鼠标up时，拖拽结束，保存div的最后高度。
问题3：div设置最大最小值
解决：当 鼠标位移量 + 最后div大小 在某个范围以外，则不改变div的大小。
JS代码如下：
<script type="text/javascript">
var finalheight = 200; //最后的高度
var he = 200; //初始高度
var dragable = false;//默认不可拖拽
var oldY = '';//记录第一次的鼠标位置
var startDrag = function(event){
dragable = true;
var e=event?event:window.event;
oldY = e.pageY; //记录第一次的鼠标位置
};
var unDrop = function(){
dragable = false;
window.event? window.event.cancelBubble = true : e.stopPropagation();
};
var endDrop = function(){
if(dragable){
finalheight = he;
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);
//鼠标的位移 + div的最后高度 = div的新高度
//向上拉 he = oldY - e.pageY + parseInt(finalheight);
//向下拉 he = e.pageY - oldY + parseInt(finalheight);
if(dragable){ //div设置最大最小值
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';
};
};
};
</script>
3、问题4：div四个方向四个鼠标样式（我没做，需要的话留言我可以帮你做一下）
四个方向的话，不能加border了，只能在上下左右各加一个div，在div:hover时候的样式不变。
4、全部代码拿去试一试：
有问题留言问。
帮助到你，记得投票或者留言，需要鼓励。
<!-- 思路以及代码以下—— 陈 -->
<!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; //最后的高度
var he = 200; //初始高度
var dragable = false;//默认不可拖拽
var oldY = '';//记录第一次的鼠标位置
var startDrag = function(event){
dragable = true;
var e=event?event:window.event;
oldY = e.pageY; //记录第一次的鼠标位置
};
var unDrop = function(){
dragable = false;
window.event? window.event.cancelBubble = true : e.stopPropagation();
};
var endDrop = function(){
if(dragable){
finalheight = he;
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);
//鼠标的位移 + 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';
};
};
};
</script>
