以下这段JS是主要解决在画面生成Image项目，并通过鼠标事件进行脱拽、移动等操作的代码。
<script Language="javascript" type="text/javascript">
вар сверху, слева;
var src,drag,dir,ope,refer,halfwidth;
вар единица = 30;
var aryItems, itemNum = 10, index, isInit, id, max = 23;
функция PageLoad()
{
document.form1.onsubmit=При отправке;
aryItems = новый массив (itemNum);
top=document.getElementById("ТАБЛИЦА").getClientRects()[0].top;
left=document.getElementById("ТАБЛИЦА").getClientRects()[0].left;
if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="")
{
var gantt=document.getElementById("__Gantt").value;
var array=gantt.split(";");
длина вар = массив.длина-1;
вар начало, ширина, элемент;
for(индекс=0;индекс<длина;индекс++)
{
item=массив[индекс].split(",");
начало = элемент [0];
ширина = элемент [1];
id="Элемент"+индекс;
aryItems[index]=id;
var track = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild(дорожка);
document.getElementById(id).style.position="absolute";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=left+unit*start;
document.getElementById(id).width=единица*ширина;
document.getElementById(id).style.zIndex=9;
}
}
еще
{
for(индекс=0;индекс<itemNum;индекс++)
{
id="Элемент"+индекс;
aryItems[index]=id;
var track = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild(дорожка);
document.getElementById(id).style.position="absolute";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=left+unit*index;
document.getElementById(id).width=unit;
document.getElementById(id).style.zIndex=9;
}
}
перетащить = ложь;
left=document.getElementById(aryItems[0]).getClientRects()[0].left;
}
Функция OnDrag()
{
if(event.srcElement.tagName!="IMG"&&!перетащите)
{
если(event.srcElement.id=="btnTrim")
{
// Обрезка();
}
}
еще
{
если(!перетащить)
{
источник = событие.srcElement;
полуширина = исходная ширина/2;
перетащить = истина;
// 方向の判断
if(event.clientX<src.getClientRects()[0].left+halfwidth)
{
дир="Назад";
Refer=src.getClientRects()[0].left+src.width;
}
еще
{
реж="Вперед";
Refer=src.getClientRects()[0].left;
}
// 操作の判断:１．移動・２．縮小／拡大
если (событие.shiftLeft)
{
ope="Переместить";
Refer=event.clientX-src.getClientRects()[0].left;
}
еще
{
ope="Масштаб";
}
}
еще
{
если(ope=="Масштаб")
{
var sleft=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
var header=src.getClientRects()[0].left-src.getClientRects()[0].left;
var хвост = src.width-header-Math.ceil((src.width-header)/unit)*unit;
var swidth=Math.ceil((src.width-header)/unit)*unit;
если (заголовок>0)
{
сдвиг=ширина+единица измерения;
}
если(хвост>0)
{
сдвиг=ширина+единица измерения;
}
src.style.left = слева;
src.width=ширина;
}
если(ope=="Переместить")
{
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
}
перетащить = ложь;
ОнТрим()
}
}
}
функция OnScale()
{
if(src!=null&&перетаскивание)
{
если(ope=="Масштаб")
{
// 縮小／拡大の場合
если(реж=="Вперед")
{
if(event.clientX-refer>=unit)
{
src.width=event.clientX-refer;
}
}
еще
{
если (refer-event.clientX>единица)
{
src.style.left=event.clientX;
src.width=refer-src.getClientRects()[0].left;
}
}
}
еще
{
// 移動の場合http://www.devdao.com/
src.style.left=event.clientX-refer;
}
}
если (event.srcElement! = ноль)
{
если(event.srcElement.tagName=="IMG")
{
if(event.clientX<event.srcElement.getClientRects()[0].left+unit/2)
{
event.srcElement.style.cursor="w-resize";
}
еще
{
event.srcElement.style.cursor="e-resize";
}
}
}
}
функция OnTrim()
{
вар предварительно, пост;
for(индекс=0;индекс<itemNum-1;индекс++)
{
pre=document.getElementById(aryItems[index]);
post=document.getElementById(aryItems[index+1]);
if(pre.getClientRects()[0].left+pre.width!=post.getClientRects()[0].left)
{
post.style.left=pre.getClientRects()[0].left+pre.width-2;
}
}
for(индекс=0;индекс<itemNum;индекс++)
{
pre=document.getElementById(aryItems[index]);
if(pre.getClientRects()[0].left>=left+unit*max)
{
pre.style.left=left+unit*max-2;
pre.width = единица измерения;
}
if((pre.getClientRects()[0].left<left+unit*max)&&(pre.getClientRects()[0].left+pre.width>left+unit*max))
{
pre.width=left+unit*max-pre.getClientRects()[0].left;
}
}
}
Функция OnSubmit()
{
вар т="";
for(индекс=0;индекс<itemNum;индекс++)
{
t=t+((document.getElementById(aryItems[index]).getClientRects()[0].left-left)/unit).toString();
т=т+",";
t=t+(document.getElementById(aryItems[index]).width/unit).toString();
т=т+";";
}
document.getElementById("__Gantt").value=t;
}
document.onmousedown=OnDrag;
document.onmousemove=OnScale;
</скрипт>
Кнопка «OnSubmit» может быть отключена, а кнопка «OnSubmit» доступна в режиме «OnSubmit».送过来的东西原封不动地发挥去，其中可以加入对数据的修改过程,也可以是通过一进入页面就倒入数据而达到生成画面的目的。
Protected Sub Button1_Click()Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Обрабатывает Button1.Click
Response.Write(Request.Params.Item("__Gantt") & "<BR>")
Dim strGantt As String = Request.Params.Item("__Gantt")
ClientScript.RegisterHiddenField("__Gantt", strGantt)
End Sub
Protected Sub Page_Load()Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Обрабатывает Me.Load
Если не IsPostBack, тогда
ClientScript.RegisterHiddenField("__Gantt", String.Empty)
Конец, если
End Sub希望对大家有用。