js功能类库放送（二）调整大小库-CSDN博客

本文介绍了一个轻量级的JavaScript解决方案，用于实现网页中对象的拖动和缩放功能，无需依赖额外框架。通过使用阴影层来提高操作速度，并详细解释了事件处理和尺寸变化的监听机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

// $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

// $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);

}

转载于:https://www.cnblogs.com/Truly/archive/2007/04/27/729669.html

js功能类库放送（二） 调整大小库

js功能类库放送（二）调整大小库