Truly
写精彩代码 品暇逸人生
posts - 91,comments - 425,trackbacks - 55

稍微有点乱,不打算整理了,因为容器位置的问题,本文演示可能有点问题,可以点击这里下载演示和源码。

轻量级的应用,无须其他任何框架,推荐使用
注意本文代码和源码均为原创,请不要移去版权说明信息

a
content body, only here can be drag!!!

dkj
This table resize itself just using a shadow.
This table resize itself just using a shadow.
dskjflsddddddddddddddddddddddddddddd







































完整源码如下:
/*********************************************************
**
**  FileName: Resize.js
**
**  Author: Truly
**  Date: 2006.8.15
**  Function: 实现指定对象的拖动等功能
**  Compatibility: IE4, IE5+, FireFox, etc.
**  Description: Perfect!!! powered by truly. 
**  Web: http://Truly.cnblogs.com
**
*********************************************************
*/


// 说明1:当对象在拖动时,其resizeObj.ResizeState状态为true,可以根据此属性判断是否处于resize状态

// 8.18 修改:增加ResizeChanged事件激发,注意在页面上给Resize对象增加onResizeChanged="callback();",
//
 当size改变时就会自动回调callback函数

// 事件注册,调用示例:_attachEvent(document, "mousemove", moveHandler);
function _attachEvent(obj, evt, func) {
    
if(obj.addEventListener) {
        obj.addEventListener(evt,func,
true); 
    }
 else if(obj.attachEvent) {
        obj.attachEvent(
"on"+evt,func);
    }
 else 
        eval(
"var old"+func+"="+obj+".on"+evt+";");
        eval(obj
+".on"+evt+"="+func+";");
    }

}


// 事件注销,调用示例:_detachEvent(document, "mousemove", moveHandler);
function _detachEvent(obj, evt, func) {
    
if(obj.removeEventListener) //DOM事件模型
        obj.removeEventListener(evt,func,true);
    }
 else if(obj.detachEvent) //IE5+ 事件模型
        obj.detachEvent("on"+evt,func);
    }
 else  //IE事件模型
        eval(obj+".on"+evt+"=old"+func+";");
    }

}


// 禁止默认行为,调用示例:_cancelDefault(event);
function _cancelDefault(e)
{
    
if(e.preventDefault) e.preventDefault(); //2级DOM
    else e.returnValue=false//IE
}


// 阻止事件冒泡, 调用示例:_cancelBubble(event);
function _cancelBubble(e)
{
    
if(e.stopPropagation) e.stopPropagation(); //2 级DOM
    else e.cancelBubble=true//IE
}


// 激发指定对象的拖动事件,使用空的shadow,速度更快。
//
 参数分别为: 
//
 $1: 拖动对象
//
 $2: event
//
 $3: Resize方向,一共八个,复合型以s和n开头(e 右 | n 上 | ne 右上 | nw 左上 | s 下 | se 右下 | sw 左下 | w 左)
//
 $4: 最小宽度, 最小高度
//
 $5: 最大宽度, 最大高度
function ResizeWithShadow(resizeObj, event, direction, minWidth, minHeight, maxX, maxY)
{
    
if(typeof(resizeObj.CanResize) != 'undefined' && !resizeObj.CanResize)
        
return;
    
var objShadow;    
    
var parentOffsetLeft = 0, parentOffsetTop = 0;
    
var obj = resizeObj;
    
    
// 处理父节点偏移量
    while(obj.parentNode && obj.parentNode.tagName != "BODY")
    
{
        parentOffsetLeft 
+= obj.parentNode.offsetLeft;
        parentOffsetTop 
+= obj.parentNode.offsetTop;        
        obj 
= obj.parentNode;
    }

    
    
if(!document.getElementById('shadow'))
    
{
        objShadow
=document.createElement("DIV");
        objShadow.id 
= 'shadow';
        objShadow.style.position
='absolute';
        objShadow.style.filter 
= 'alpha(opacity=30,style=0)';
        objShadow.style.backgroundColor 
= '#ccc';
        document.body.appendChild(objShadow);
    }

    
else
        objShadow
= document.getElementById('shadow');

//    // 附加SizeChanged事件,注意全部小写
//
    if(resizeObj.onsizechanged)
//
        objShadow.onsizechanged = resizeObj.onsizechanged;
//
    else if(resizeObj.onSizeChanged)
//
        objShadow.onsizechanged = resizeObj.onSizeChanged;
//
        
//
    if(resizeObj.onResizeCompleted)
//
        objShadow.onResizeCompleted = resizeObj.onResizeCompleted;
    // 将阴影层放置在本层上面以便观察
    objShadow.style.zIndex = resizeObj.style.zIndex+1;
    objShadow.style.left 
= parentOffsetLeft + resizeObj.offsetLeft + 'px';
    objShadow.style.top 
= parentOffsetTop + resizeObj.offsetTop + 'px';
    objShadow.style.width 
= resizeObj.offsetWidth + 'px';
    objShadow.style.height 
= resizeObj.offsetHeight + 'px';
    
    objShadow.style.display
='';
    
    Resize(objShadow, event, direction, minWidth, minHeight, maxX, maxY)
    _attachEvent(document, 'mouseup', dragEnd);

    
//我们处理了该事件,不要再让其他元素看见.
    _cancelBubble(event);

    
//下面禁止执行默认动作
    _cancelDefault(event);
    
function dragEnd()
    
{
        
var chgX = 1;
        
var chgY = 1;
        
switch(direction)
        
{
            
//(e 右 | n 上 | ne 右上 | nw 左上 | s 下 | se 右下 | sw 左下 | w 左)
            case 'e':   // 右
                chgX = 1;
                chgY 
= 0;
                
break;
            
case 'n':   // 上
                chgX = 0;
                chgY 
= -1;
                
break;
            
case 'ne':   // 右上
                chgX = 1;
                chgY 
= -1;
                
break;
            
case 'nw':   // 左上
                chgX = -1;
                chgY 
= -1;
                
break;
            
case 's':   // 下
                chgX = 0;
                chgY 
= 1;
                
break;
            
case 'se':   // 右下
                chgX = 1;
                chgY 
= 1;
                
break;
            
case 'sw':   // 左下
                chgX = -1;
                chgY 
= 1;
                
break;
            
case 'w':   // 左
                chgX = -1;
                chgY 
= 0;
                
break;
        }

        
        
if(chgX < 0)
        
{
            resizeObj.style.left 
= objShadow.offsetLeft-parentOffsetLeft + 'px';
        }

        
if(chgY < 0)
        
{
            resizeObj.style.top 
= objShadow.offsetTop-parentOffsetTop + 'px';
        }

        
        resizeObj.style.width 
= objShadow.style.width;
        resizeObj.style.height 
= objShadow.style.height;
                            
        
if(resizeObj.onsizechanged)
            eval(resizeObj.onsizechanged);
        
else if(resizeObj.onSizeChanged)
            eval(resizeObj.onSizeChanged);
        
        
if(resizeObj.onResizeCompleted)
            eval(resizeObj.onResizeCompleted);
        
        
// 更新对象的状态
        resizeObj.ResizeState = false;
        
// 注销事件
        _detachEvent(document, 'mouseup', dragEnd);
        
        
// 删除阴影层,防止缓存
        document.body.removeChild(objShadow);
        
        
//不要再让事件进一步传播.
        _cancelBubble(event);
    }

}


// $1: 拖动对象
//
 $2: event
//
 $3: Resize方向,一共八个,复合型以s和n开头(e 右 | n 上 | ne 右上 | nw 左上 | s 下 | se 右下 | sw 左下 | w 左)
//
 $4: 最大X坐标, 最大Y坐标
//
 $5: 最小

// 激发指定对象的拖动事件, 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function Resize(resizeObj, event, direction, minWidth, minHeight, maxX, maxY)
{
    
if(typeof(resizeObj.CanResize) != 'undefined' && !resizeObj.CanResize)
        
return;
        resizeObj.style.width 
= resizeObj.offsetWidth;
        resizeObj.style.height 
= resizeObj.offsetHeight;
    
// 将对象的拖动状态设置为true
    resizeObj.ResizeState = true;
    
// 取得对应坐标位置
    var oldX = event.clientX;
    
var oldY = event.clientY;
    
var oldWidth = resizeObj.offsetWidth;
    
var oldHeight= resizeObj.offsetHeight;
    oldOffsetRight 
= screen.width -resizeObj.offsetLeft - resizeObj.offsetWidth;
    oldOffsetBottom 
= screen.height -resizeObj.offsetTop - resizeObj.offsetHeight;
    
    
var isChanged = false;  // 对象的Size是否发生改变
    var newHeight = 0, newWidth=0;
    
    
//document.getElementById('dbg').innerHTML = oldX;
    _attachEvent(document, "mousemove", moveHandler);
    _attachEvent(document, 'mouseup', resizeEnd);

    
//我们处理了该事件,不要再让其他元素看见.
    _cancelBubble(event);

    
//下面禁止执行默认动作
    _cancelDefault(event);
    
    
//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
    function moveHandler(e)  {
        
var chgX = 1;
        
var chgY = 1;
        
switch(direction)
        
{
            
//(e 右 | n 上 | ne 右上 | nw 左上 | s 下 | se 右下 | sw 左下 | w 左)
            case 'e':   // 右
                chgX = 1;
                chgY 
= 0;
                
break;
            
case 'n':   // 上
                chgX = 0;
                chgY 
= -1;
                
break;
            
case 'ne':   // 右上
                chgX = 1;
                chgY 
= -1;
                
break;
            
case 'nw':   // 左上
                chgX = -1;
                chgY 
= -1;
                
break;
            
case 's':   // 下
                chgX = 0;
                chgY 
= 1;
                
break;
            
case 'se':   // 右下
                chgX = 1;
                chgY 
= 1;
                
break;
            
case 'sw':   // 左下
                chgX = -1;
                chgY 
= 1;
                
break;
            
case 'w':   // 左
                chgX = -1;
                chgY 
= 0;
                
break;
        }

        
// 根据所在位置进行向左或向右拖动大小
        if(chgX < 0)
        
{
            newWidth 
= (oldWidth + oldX - e.clientX );
        }

        
else if(chgX > 0)
        
{
            newWidth 
= (oldWidth + e.clientX - oldX);
        }

        
if(chgY < 0)
        
{
            newHeight 
= (oldHeight + oldY - e.clientY );
        }

        
else if(chgY > 0)
        
{
            newHeight 
= (oldHeight + e.clientY - oldY);
        }

        
        
// 最小值判断
        if(chgX != 0 && minWidth && newWidth < minWidth)
            newWidth 
= minWidth;

        
if(chgY != 0 && minHeight && newHeight < minHeight)
            newHeight 
= minHeight;
        
        
// 反相移动时以右上角为原始点
        if(chgX < 0)
        
{
            resizeObj.style.left 
= screen.width - oldOffsetRight - newWidth +'px';
        }

        
        
if(chgY < 0)
        
{
            resizeObj.style.top 
= screen.height - oldOffsetBottom - newHeight +'px';
        }

        
        
if(newWidth > 0)
            resizeObj.style.width
= newWidth + "px";
        
if(newHeight > 0)
            resizeObj.style.height
= newHeight + "px";
            
                
        _cancelBubble(event);
    }

    
    
function resizeEnd()
    
{        
        
// 大小发生改变
        if(resizeObj.offsetWidth != oldWidth || resizeObj.offsetHeight != oldHeight)
            isChanged 
= true;
                    
        
if(isChanged && resizeObj.onsizechanged)
            eval(resizeObj.onsizechanged);
        
else if(isChanged && resizeObj.onSizeChanged)
            eval(resizeObj.onSizeChanged);
        
        
if(resizeObj.onResizeCompleted)
            eval(resizeObj.onResizeCompleted);
        
        
// 更新对象的状态
        resizeObj.ResizeState = false;
        
// 注销事件
        _detachEvent(document, 'mousemove', moveHandler);
        _detachEvent(document, 'mouseup', resizeEnd);
        
        
//不要再让事件进一步传播.
        _cancelBubble(event);
        
if(resizeObj.layerid)  //有蒙层的模块要改变蒙层的高度、宽度等。
            ChangeLayer(resizeObj);
    }

}
posted on 2007-04-27 13:39  Truly  阅读(1491)  评论(0编辑  收藏