左右移动的js分割面板 博客分类： JavaScript IEXHTMLBlog
程序员文章站
2024-03-07 09:45:32
...
<!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=utf-8" />
<title>无标题文档-SH!</title>
<style>
/* 左右分割条样式 */
.lrSeparator {
background-color:#549FE3;
cursor:e-resize;
font-size : 1px;
}
/* 上下分割条样式 */
.udSeparator {
background-color:#549FE3;
cursor:s-resize;
font-size : 1px;
}
td {
border:1px solid #549FE3;
}
</style>
<script>
/**
* 类 名 称： Separator|SP
* 功能说明： 分割条类
* 版权信息： CopyRight 2005-2006 JoeCom
* 参数说明： o1,o2 : 两个对象
spTpe: 方向，是左右，还是上下
w:宽度;wx:left的差值;wy:top的差值
wh:左右拖动时，是宽度的差值，上下则是高度的差值
wl:上下拉动时时的一个差值
差值的存在是因为控件可能存在border,padding,top等一些情况，
还有就是控件的position不是为absolute
* 创 建 人： JoeCom | MSN:ju*@hotmail.com | blog:http://hi.baidu.com/joecom
* 创建日期： 2006-07-27
* 修改记录：
* 备 注 ： IE下效果最好，FF下TD标签不支持onresize事件？
*/
//以下定义拖拉方向的常量
SP_LEFTRIGHT = 1; //左右拖拉
SP_UPDOWN = 2; //上下拖拉
function Separator(o1,o2,spType,w,wx,wy,wh,wl){
var me = this;
this.o1 = (typeof o1=="string")?document.getElementById(o1):o1;
this.o2 = (typeof o2=="string")?document.getElementById(o2):o2;
this.w = w||3; //Width or Height
this.wx = wx||0; //parentOffsetLeft
this.wy = wy||0; //parentOffsetTop
this.wh = wh||0; //parentOffsetHeight
this.wl = wl||0; //parentOffsetWidth
//this.wr = wr||0; //parentOffsetRight
this.autoresize = true;
this.spType = (spType==SP_UPDOWN)?SP_UPDOWN:SP_LEFTRIGHT;
this.allWidth = this.o1.clientWidth + this.o2.clientWidth + this.w ;
this.allHeight = this.o1.clientHeight + this.o2.clientHeight + this.w ;
this.isIE = false;
this.addEvent = function(el, evname, func) {
if (el.attachEvent) { // IE
el.attachEvent("on" + evname, func);
this.isIE = true;
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
};
this.sp = document.createElement("div");
document.body.appendChild(this.sp);
this.init = function(){
if (this.spType==SP_LEFTRIGHT)
{
with (this.sp){
style.position = "absolute";
style.left = this.o1.offsetLeft + this.o1.clientWidth + this.wx + "px";
style.top = this.o1.offsetTop + this.wy + "px" ;
style.width = this.w;
style.height = this.o1.clientHeight + this.wh + "px";
className = "lrSeparator";
style.zIndex = "200";
}
}else
{
with (this.sp){
style.position = "absolute";
style.left = this.o1.offsetLeft + this.wx + "px";
style.top = this.o1.offsetTop + this.o1.clientHeight + this.wy + "px" ;
style.width = this.o1.clientWidth + this.wh + "px";
style.height = this.w;
className = "udSeparator";
style.zIndex = "200";
}
}
}
this.init();
this.dd = new ObjectDragDrop(this.sp);
this.dd.moveStyle = (this.spType==SP_LEFTRIGHT)?DD_HMOVE:DD_VMOVE;
this.resize = function(){
this.init();
}
this.addEvent(window,"resize",function(){me.resize();});
this.addEvent(this.o1,"resize",function(){me.resize();});
this.dd.isMoved = function(newPosX,newPosY){
if (me.spType==SP_LEFTRIGHT)
{
var mw1 = me.o1.getAttribute("minWidth");
var mw2 = me.o2.getAttribute("minWidth");
if (mw1==null){mw1 = 0;}
if (mw2==null){mw2 = 0;}
return {x:((newPosX - me.o1.offsetLeft)>=mw1&&(newPosX - me.o1.offsetLeft)<=(me.allWidth - mw2)),y:false};
}else
{
var mh1 = me.o1.getAttribute("minHeight");
var mh2 = me.o2.getAttribute("minHeight");
if (mh1==null){mh1 = 0;}
if (mh2==null){mh2 = 0;}
return {x:false,y:((newPosY - me.o1.offsetTop - me.wy)>=mh1&&(newPosY - me.o1.offsetTop - me.wy)<=( me.allHeight - mh2))};
}
}
this.dd.onDrop = function(){
if (me.spType==SP_LEFTRIGHT)
{
me.o1.style.width = me.sp.offsetLeft - me.o1.offsetLeft - me.wx - me.wl;
if (!me.autoresize){
me.o2.style.width = me.allWidth - me.o1.clientWidth - me.w;
if (me.o2.tagName!="TD")
{
me.o2.style.left = me.sp.offsetLeft;
}
}
}else
{
me.o1.style.height = me.sp.offsetTop - me.o1.offsetTop - me.wy;
if (!me.autoresize){
me.o2.style.height = me.allHeight - me.o1.clientHeight ;
if (me.o2.tagName!="TR")
{
me.o2.style.top = me.sp.offsetTop;
}
}
}
if (!me.isIE){
me.init();
}
}
}
/**
* 类 名 称： DragDrop|DD
* 功能说明： 可拖动类
* 版权信息： CopyRight 2005-2006 JoeCom
* 创 建 人： JoeCom | MSN:ju*@hotmail.com | blog:http://hi.baidu.com/joecom
* 创建日期： 2006-07-19
* 修改记录： 1. 2006-07-21 加上scrollTop 和 scrollLeft的相对移动
ł. 2006-07-25 加入moveStyle属性，增加水平移动和垂直移动的功能
Ń. 2006-07-25 加入isMoved函数，增加范围移动功能
*/
//以下定义移动方向的常量
DD_FREEMOVE = 0; //*移动，没有限制
DD_HMOVE = 1; //水平移动，也就是左右移动
DD_VMOVE = 2; //垂直移动，也就是上下移动
function ObjectDragDrop(obj){
var me = this;
this.moveStyle = DD_FREEMOVE ;
this.foo = (typeof obj=="string")?document.getElementById(obj):obj;
this.onDrop = function(){};
this.onDrag = function(){};
this.isMoved = function(newPosX,newPosY){return {x:true,y:true}};//offsetX:x的移动距离;offsetY:y的移动距离
this.foo.onmousedown = function(e){
var foo = me.foo;
e = e||event;
if( e.layerX ){ foo.oOffset = {x:e.layerX, y:e.layerY }; }
else { foo.oOffset = {x:e.offsetX, y:e.offsetY }; }
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false; };
}
this.drag = function(e){
var foo = me.foo;
e=e||event;
var mv = me.isMoved(e.clientX - foo.oOffset.x + document.body.scrollLeft,
e.clientY - foo.oOffset.y + document.body.scrollTop);
if (mv.x&&me.moveStyle!=DD_VMOVE)
{
foo.style.left = e.clientX - foo.oOffset.x + document.body.scrollLeft + "px";
}
if (mv.y&&me.moveStyle!=DD_HMOVE)
{
foo.style.top = e.clientY - foo.oOffset.y + document.body.scrollTop + "px";
}
me.onDrag();
}
this.drop = function(e){
e=e||event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
me.onDrop();
}
}
</script>
<script>
window.onload=function(){
//div左右拉动
var divsp = new Separator(divl,divr,SP_LEFTRIGHT,2);
divsp.autoresize = false;
}
</script>
</head>
<body>
<div id=divl minWidth="30" style="position:absolute;top:350px;width:100px;left:0px;height:100px;background-color:#CCCCCC">div1</div>
<div id=divr minWidth="30" style="position:absolute;top:350px;width:100px;left:102px;height:100px;background-color:#FF0000">div2</div>
</body>
</html> 上一篇： 初步理解Java的泛型特性