问题
1：在div的边框时改变鼠标的样式问题
2：如何改变div的高度问题
3：div设置最大最小值
4：div四个方向四个鼠标样式（我没做，需要的话留言我可以帮你做一下）
全部代码在文末
--------------------------------------------------------------------
问题1：在div的边框时改变鼠标的样式
解决：用大div包着一个小的div，小的div长宽100%，大的div有边框。大的div hover 样式为 cursor: s-resize;小的div hover 样式为 cursor: default;
--------------------------
问题2：如何改变div的高度
解决思路：在大div border鼠标down时开启拖动，document监测鼠标move，鼠标位移量 + 最后div大小 = div的大小document监测鼠标up时，拖拽结束，保存div的最后高度。问题3：div设置最大最小值解决：当 鼠标位移量 + 最后div大小 在某个范围以外，则不改变div的大小。
--------------------------
问题3：div设置最大最小值
解决：当鼠标位移量 + 最后div大小 在某个范围以外，则不改变div的大小。
--------------------------
问题4：div四个方向四个鼠标样式（我没做，需要的话留言我可以帮你做一下）
解决：四个方向的话，不能加border了，只能在上下左右各加一个div，在div:hover时候的样式不变。
--------------------------
全部代码拿去试一试（编辑器不让放全部的代码，我分开写了）：有问题留言问。帮助到你，记得留言，需要鼓励。
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;
}
HTML
<div id="moveBarBox" class="outer" onmousedown="startDrag()"><div class="inner" ></div></div>
JS
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 = '120';return;
}
if(he>400 || he==400){//div最高高度
box.style.height = '400px';he = '400';
return;
}
box.style.height = he + 'px';
};
};
};
作者：陈困困
网友评论