javascript 菜菜鸟求教： javascript 拖动改变单元格大小
rt，在网上找了一些，都不太好使，目标，就是当鼠标放置到单元格之间时，鼠标变成双箭头形，而且可以进行拖动，请高手帮忙，谢谢
[解决办法]
这个是原先写的鼠标效果。。如果要修改成LZ想要的效果只需要修改下即可。。。麻烦LZ自己改下好了。。偶要做东西的说。。
<!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>
<script type= "text/javascript ">
var Class = {
//创建类
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
if (a.attachEvent) a.attachEvent(b[0], c);
else a.addEventListener(b[1] || b[0].replace(/^on/, " "), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
if (a.detachEvent) a.detachEvent(b[0], c);
else a.removeEventListener(b[1] || b[0].replace(/^on/, " "), c, d || false);
return c;
},
reEvent : function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
}
});
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};
var CMouse = Class.create();
CMouse.prototype = {
initialize : function (obj) {
//初始化参数
var wc = this;
wc.div = wc.init_div();
wc.click = null; //鼠标按下后记录其坐标
wc.sFunc = Object.addEvent(document, [ "onmousedown "], wc.sMove.bind(wc));
wc.iFunc = wc.eFunc = wc.dFunc = null;
},
init_div : function () {
//创建DIV，修改样式，并返回
var div = document.createElement( "div ");
with (div.style) {
position = "absolute ";
zIndex = 100;
overflow = "hidden ";
display = "none ";
width = height = top = left = "0px ";
border = "#CCCCCC 1px solid ";
backgroundColor = "#F4F4F4 ";
filter = "alpha(opcaity=50) ";
opacity = "0.5 ";
}
div.innerHTML = " ";
return document.body.appendChild(div);
},
reMouse : function () {
//获取鼠标位置
var e = Object.reEvent();
return {
x : document.documentElement.scrollLeft + e.clientX,
y : document.documentElement.scrollTop + e.clientY
};
},
eDiv : function (pos) {
//处理DIV
var wc = this, div = wc.div;
with(div.style) {
left = pos.left + "px ";
top = pos.top + "px ";
width = pos.width + "px ";
height = pos.height + "px ";
}
},
sMove : function () {
//鼠标按下后
var wc = this;
wc.click = wc.reMouse();
if (wc.iFunc) return true;
with (wc.div.style) {
display = "block ";
width = height = "0px ";
}
wc.iFunc = Object.addEvent(document, [ "onmousemove "], wc.iMove.bind(wc));
wc.eFunc = Object.addEvent(document, [ "onmouseup "], wc.eMove.bind(wc));
wc.dFunc = document.onselectstart;
document.onselectstart = new Function( "return false ");
},
iMove : function () {
//鼠标移动时
var wc = this, oms = wc.click, mos = wc.reMouse()
wc.eDiv({
left : Math.min(mos.x, oms.x), top : Math.min(mos.y, oms.y),
width : Math.abs(mos.x - oms.x), height : Math.abs(mos.y - oms.y)
});
},
eMove : function () {
//鼠标松开后
var wc = this;
wc.div.style.display = "none ";
Object.delEvent(document, [ "onmousemove "], wc.iFunc);
Object.delEvent(document, [ "onmouseup "], wc.eFunc);
wc.click = wc.iFunc = wc.eFunc = null;
document.onselectstart = wc.dFunc;
}
};
var win_load = Object.addEvent(window, [ "onload "], function () {
var mouse = new CMouse, div = document.createElement( "div ");
div.innerHTML = new Array(101).join( " <br \/> ");
document.body.appendChild(div);
});
</script>
</head>
<body> </body>
</html>
[解决办法]
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:1;
overflow:hidden;
z-index:100;
float:right;
left:1;
cursor:e-resize;
}
</style>
<script language=javascript>
var currentResizeDivObj=null;
function MouseDownToResize(event,obj){
currentResizeDivObj=obj;
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentNode.offsetWidth;
obj.pareneTableW=obj.parentNode.offsetParent.offsetWidth;
if(obj.setCapture) obj.setCapture();
else event.preventDefault();
}
function MouseMoveToResize(event){
if(!currentResizeDivObj) return ;
var obj=currentResizeDivObj;
event=event||window.event;
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth> 0)
{
obj.parentNode.style.width = newWidth;
obj.parentNode.offsetParent.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(){
if(!currentResizeDivObj) return;
if (currentResizeDivObj.releaseCapture) currentResizeDivObj.releaseCapture();
currentResizeDivObj=null;
}
</script>
</head>
<body onmousemove= "MouseMoveToResize(event); " onmouseup= "MouseUpToResize(); " >
<div style= "font-size:10pt; ">
注1：改变Table的列宽 <br/>
<br/>
注：本页面仅在IE6/Firefox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About%20ChangeColumnWidth "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>
<table border=1 style= "table-layout:fixed; " >
<tr bgcolor=cccccc >
<td valign=top >
<div class= "resizeDivClass " onmousedown= "MouseDownToResize(event,this); " > </div>
aaa
</td>
<td valign=top >
<div class= "resizeDivClass " onmousedown= "MouseDownToResize(event,this); " > </div>
bbb
</td>
<td valign=top >
<div class= "resizeDivClass " onmousedown= "MouseDownToResize(event,this); " > </div>
ccc
</td>
</tr>
<tr>
<td> aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a </td> <td> bbbb </td> <td> dddd </td>
</tr>
</table>
</body>
</html>
