如何实现像MS Project项目管理软件中作计划时的时间轴的拖拉功能？

lazyfish 2003-11-06 02:00:38

用鼠标选定一个起始时间并拖动鼠标到结束时间，这段时间用蓝色条表示，并可以拖动蓝色条的两端改变蓝色条的宽度。我的想法是用一个table，其中只有一行，分24列（每一列表示１小时），在这一行压住鼠标并在这一行移动时，就把鼠标经过的列的背景改变，不知道这样能不能实现，请大哥们给一个实现的方法，最好能有实现的代码。

...全文

351 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

GageCSDN 2003-11-10

打赏
举报

这个可能够用了吧：
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Demo</title>
</head>

<body>
<script language="JavaScript">
var SelectStart;
var SelectEnd;
function MouseMove()
{
var obj = window.event.srcElement;
if(window.event.button != 1) return false;
if(obj.tagName != "TD") return false;

obj.bgColor = "#0000FF";
}

function Start()
{
SelectStart = -1;
SelectEnd = -1;
var obj = window.event.srcElement.parentElement;
if(window.event.button != 1) return false;
if(obj.tagName != "TR") return false;
for(var i = 0; i < obj.children.length; i++)
{
obj.children[i].bgColor = "#FFFFFF";
if(obj.children[i] == window.event.srcElement) SelectStart = i;
}
}

function End()
{
var obj = window.event.srcElement;
if(window.event.button != 1) return false;
if(obj.tagName != "TD") return false;
for(var i = 0; i < obj.parentElement.children.length; i++)
{
if(obj.parentElement.children[i] == window.event.srcElement) SelectEnd = i;
}

if(SelectStart > SelectEnd)
{
var tmp = SelectStart;
SelectStart = SelectEnd;
SelectEnd = tmp;
}

for(var i = SelectStart; i < SelectEnd; i++)
{
obj.parentElement.children[i].bgColor = "#0000FF";
}

if(SelectStart < 0)
StartNum.innerText = "没有选择";
else
StartNum.innerText = obj.parentElement.children[SelectStart].title;

if(SelectEnd < 0)
EndNum.innerText = "没有选择";
else
EndNum.innerText = obj.parentElement.children[SelectEnd].title;

}
</script>
<table border="0" width="300" cellspacing="0" cellpadding="0" style="border:1 solid #6699FF;cursor:default;">
<tr height="22" onmousemove="MouseMove();" onmousedown="Start();" onmouseup="End();">
<td width="4%" title="1"></td>
<td width="4%" title="2"></td>
<td width="4%" title="3"></td>
<td width="4%" title="4"></td>
<td width="4%" title="5"></td>
<td width="4%" title="6"></td>
<td width="4%" title="7"></td>
<td width="4%" title="8"></td>
<td width="4%" title="9"></td>
<td width="4%" title="10"></td>
<td width="4%" title="11"></td>
<td width="4%" title="12"></td>
<td width="4%" title="13"></td>
<td width="4%" title="14"></td>
<td width="4%" title="15"></td>
<td width="4%" title="16"></td>
<td width="4%" title="17"></td>
<td width="4%" title="18"></td>
<td width="4%" title="19"></td>
<td width="4%" title="20"></td>
<td width="5%" title="21"></td>
<td width="5%" title="22"></td>
<td width="5%" title="23"></td>
<td width="5%" title="24"></td>
</tr>
</table><br>
选定范围：<span id="StartNum">没有选择</span> - <span id="EndNum">没有选择</span>
</body>

</html>

seabell 2003-11-10