DIV固定在页面的某个位置,不可拖拽
位于页面左边,鼠标点击且移动,向右移拉大,向左移缩小:
DIV位于页面左边,点击鼠标且左右移动可改变其宽度.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;
}
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.οnmοuseup=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';
};
};
};
位于页面右边,鼠标点击且移动,向右移缩小,向左移拉大:
DIV位于页面右边,点击鼠标且左右移动可改变其宽度.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;
}
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.οnmοuseup=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';
};
};
};
位于页面上边,鼠标点击且移动,向上移缩小,向下移拉大:
DIV位于页面上边,点击鼠标且上下移动可改变其高度.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;
}
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';
};
};
};
位于页面下边,鼠标点击且移动,向上移拉大,向下移缩小:
DIV位于页面下边,点击鼠标且上下移动可改变其高度.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;
}
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';
};
};
};