用Table简单实现Grid中的拖动效果

来源：互联网发布：网络电视直播源码编辑：程序博客网时间：2024/05/22 10:49

网上有很多网友提供此功能，但是大部分都是封装到类里的，一些刚入门或对JS不甚了解的朋友就只能引用别人的东西，想改一下又怕出错，现在提供一个超简单的示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

table

{

background-color:#808080;

font-size:12px; line-height:20px;

table-layout:fixed;

}

{

background-color:#fff;

}

.tit

{

border-left:1px solid #fff;

border-top:1px solid #fff;

background-color:#d6d3ce;

text-align:center;

clear:both;

}

.mover

{

float:right;

overflow:hidden;

width:5px; height:100%;

cursor:col-resize;

}

.lable

{

float:left;

margin-left:2px;

}

</style>

function gridMousedown(obj,e) {

var defaultWidth = obj.offsetWidth;

var defaultLeft = e.clientX;

var handleObj = obj;

if (!obj.initWidth) obj.initWidth = obj.offsetWidth;

document.onmousemove = function ()

{

var initWidth = handleObj.initWidth;

var newWidth = defaultWidth + (e.clientX-defaultLeft);

newWidth = newWidth<initWidth?initWidth:newWidth;

handleObj.width = newWidth;

};

document.onmouseup = function ()

{

document.onselectstart = document.onmousemove = document.onmouseup = null;

};

document.onselectstart = function ()

{

return false;

};

}

</script>

</HEAD>

<BODY>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

</table>

</BODY>

</HTML>