問題
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監(jiān)測鼠標move，鼠標位移量 + 最后div大小 = div的大小document監(jiān)測鼠標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';
};
};
};
作者：陳困困
