自己写过单边界拖动层的代码，后来没空就不想写了原理差不多，以下是最简单的一边拖动，其它的也难不倒那去自己看自己写最好，不然就不要做这样效果我觉得 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .nresize{ cursor: n-resize; } .sresize{ cursor: s-resize; } .wresize{ cursor: w-resize; } .eresize{ cursor: e-resize; } #div_test{ position:absolute; width:100px; height:100px; background-color:#CCCCCC; top:50%; left:50%; margin-left:-50px; margin-top:-50px;} </style> <script language="javascript"> var mouseOffset = null; var iMouseDown = false; var lMouseState = false; var iInside = false; var minSize = 20; var maxSize = 300; var direction = null;var curTarget = null; var lastTarget = null;function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top}; } function mouseMove(ev){ ev = ev || window.event; var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); var objPos = null; // mouseOut event - fires if the item the mouse is on has changed /*if(lastTarget && (target!==lastTarget)){ // reset the classname for the target element var origClass = lastTarget.getAttribute('origClass'); if(origClass) lastTarget.className = origClass; }*/ /* */ var dragable = target.getAttribute('enlargeable');
我以前做得，代码很多，自己慢慢看
注意只支持IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.nresize{ cursor: n-resize; }
.sresize{ cursor: s-resize; }
.wresize{ cursor: w-resize; }
.eresize{ cursor: e-resize; }
#div_test{ position:absolute; width:100px; height:100px; background-color:#CCCCCC; top:50%; left:50%; margin-left:-50px; margin-top:-50px;}
</style>
<script language="javascript">
var mouseOffset = null;
var iMouseDown = false;
var lMouseState = false;
var iInside = false;
var minSize = 20;
var maxSize = 300;
var direction = null;var curTarget = null;
var lastTarget = null;function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function getPosition(e){
var left = 0;
var top = 0; while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
} left += e.offsetLeft;
top += e.offsetTop; return {x:left, y:top};
}
function mouseMove(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
var objPos = null; // mouseOut event - fires if the item the mouse is on has changed
/*if(lastTarget && (target!==lastTarget)){
// reset the classname for the target element
var origClass = lastTarget.getAttribute('origClass');
if(origClass) lastTarget.className = origClass;
}*/ /*
*/
var dragable = target.getAttribute('enlargeable');
if(dragable != null){
objPos = getPosition(target);
} // 鼠标移动到可以被放大缩小对象的上方并且没有被拖动
if(curTarget == null && dragable!=null){
//刚刚移动进来
if(target!=lastTarget){
}
//鼠标是否移动到可以拖动的位置
if( mousePos.x>=(objPos.x + target.offsetWidth - 2) &&
mousePos.x<=(objPos.x + target.offsetWidth) &&
mousePos.y>=(objPos.y + 2) &&
mousePos.y<=(objPos.y + target.offsetHeight - 2)){
target.style.cursor = "e-resize";
iInside = true;
direction = "right"
}else if(mousePos.x>=(objPos.x + 2) &&
mousePos.x<=(objPos.x + target.offsetWidth - 2) &&
mousePos.y>=(objPos.y + target.offsetHeight - 2) &&
mousePos.y<=(objPos.y + target.offsetHeight)){
target.style.cursor = "s-resize";
iInside = true;
direction = "down"
}else{
target.style.cursor = "default";
iInside = false;
direction = null
}
// if the user is just starting to drag the element
if(iInside && iMouseDown && !lMouseState){
// mouseDown target
curTarget = target;
}
}
// 如果正在拖动
if(curTarget){
//如果移动导致变化
objPos = getPosition(curTarget);
if(direction == "right"){
//enlarge
if( mousePos.x > (objPos.x + curTarget.offsetWidth) && (mousePos.x - objPos.x) < maxSize){
test(mousePos.x+","+objPos.x+","+curTarget.offsetWidth);
curTarget.style.width = mousePos.x - objPos.x;
}
//shorten
if( mousePos.x < (objPos.x + curTarget.offsetWidth - 2) && (mousePos.x - objPos.x) > minSize){
test(mousePos.x+","+objPos.x+","+curTarget.offsetWidth);
curTarget.style.width = mousePos.x - objPos.x;
}
}else if(direction == "down"){
//enlarge
if( mousePos.y > (objPos.y + curTarget.offsetHeight) && (mousePos.y - objPos.y) < maxSize){
test(mousePos.y+","+objPos.y+","+curTarget.offsetHeight);
curTarget.style.height = mousePos.y - objPos.y;
}
//enlarge
if( mousePos.y < (objPos.y + curTarget.offsetHeight - 2) && (mousePos.y - objPos.y) > minSize){
test(mousePos.y+","+objPos.y+","+curTarget.offsetHeight);
curTarget.style.height = mousePos.y - objPos.y;
}
}
} // track the current mouse state so we can compare against it next time
lMouseState = iMouseDown; // mouseMove target
lastTarget = target;
}
function mouseUp(ev){
if(curTarget){
}
curTarget = null;
iMouseDown = false;
}function mouseDown(){
iMouseDown = true;
if(lastTarget){
return false;
}
}document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;/*
test only
*/
function test(str){
document.getElementById("div_state").innerHTML = str;
}
</script>
</head><body>
<div id="div_state"></div>
<div id="div_test" enlargeable="true"></div>
</body>
</html>