以下这段JS是主要解决在画面生成Image项目，并通过鼠标事件进行脱拽、移动等操作的代码。
<linguagem script="javascript" type="text/javascript">
var superior,esquerda;
var src,arrastar,dir,ope,referir,meia largura;
var unidade=30;
var aryItems,itemNum=10,index,isInit,id,max=23;
função PageLoad()
{
document.form1.onsubmit=OnSubmit;
aryItems=new Array(itemNum);
top=document.getElementById("TABLE").getClientRects()[0].top;
left=document.getElementById("TABLE").getClientRects()[0].left;
if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="")
{
var gantt=document.getElementById("__Gantt").valor;
var array=gantt.split(";");
var comprimento=array.length-1;
var início,largura,item;
for(índice=0;índice<comprimento;índice++)
{
item=array[índice].split(",");
início=item[0];
largura=item[1];
id="Item"+índice;
aryItems[índice]=id;
var track = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild(faixa);
document.getElementById(id).style.position="absoluto";
document.getElementById(id).style.top=top+unidade*index;
document.getElementById(id).style.left=esquerda+unidade*start;
document.getElementById(id).width=unidade*largura;
document.getElementById(id).style.zIndex=9;
}
}
outro
{
for(índice=0;índice<itemNum;índice++)
{
id="Item"+índice;
aryItems[índice]=id;
var track = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild(faixa);
document.getElementById(id).style.position="absoluto";
document.getElementById(id).style.top=top+unidade*index;
document.getElementById(id).style.left=esquerda+unidade*index;
document.getElementById(id).largura=unidade;
document.getElementById(id).style.zIndex=9;
}
}
arrastar=falso;
left=document.getElementById(aryItems[0]).getClientRects()[0].left;
}
função OnDrag()
{
if(event.srcElement.tagName!="IMG"&&!arrastar)
{
if(event.srcElement.id=="btnTrim")
{
//OnTrim();
}
}
outro
{
se(!arrastar)
{
src=event.srcElement;
meia largura = src.width/2;
arrastar=verdadeiro;
// 方向の判断
if(event.clientX<src.getClientRects()[0].left+halfwidth)
{
dir="Para trás";
consulte=src.getClientRects()[0].left+src.width;
}
outro
{
dir="Avançar";
consulte=src.getClientRects()[0].left;
}
// 操作の判断：１．移動・２．縮小／拡大
if(evento.shiftLeft)
{
ope="Mover";
consulte=event.clientX-src.getClientRects()[0].left;
}
outro
{
ope="Escala";
}
}
outro
{
if(ope=="Escala")
{
var sleft=Math.ceil((src.getClientRects()[0].esquerda-esquerda)/unidade-1)*unidade+esquerda;
var header=src.getClientRects()[0].left-src.getClientRects()[0].left;
var tail=src.width-header-Math.ceil((src.width-header)/unit)*unit;
var swidth=Math.ceil((src.width-header)/unit)*unit;
se(cabeçalho>0)
{
largura=largura+unidade;
}
if(cauda>0)
{
largura=largura+unidade;
}
src.style.left=esquerda;
src.width=largura;
}
if(ope=="Mover")
{
src.style.left=Math.ceil((src.getClientRects()[0].esquerda-esquerda)/unidade-1)*unidade+esquerda;
}
arrastar=falso;
OnTrim()
}
}
}
função OnScale()
{
if(src!=nulo&&arrastar)
{
if(ope=="Escala")
{
// 縮小／拡大の場合
if(dir=="Avançar")
{
if(event.clientX-refer>=unidade)
{
src.width=event.clientX-refer;
}
}
outro
{
if(refer-event.clientX>unidade)
{
src.style.left=event.clientX;
src.width=refer-src.getClientRects()[0].left;
}
}
}
outro
{
// 移動の場合http://www.devdao.com/
src.style.left=event.clientX-refer;
}
}
if(event.srcElement!=nulo)
{
if(event.srcElement.tagName=="IMG")
{
if(event.clientX<event.srcElement.getClientRects()[0].esquerda+unidade/2)
{
event.srcElement.style.cursor="w-resize";
}
outro
{
event.srcElement.style.cursor="e-resize";
}
}
}
}
função OnTrim()
{
var pré,pós;
for(índice=0;índice<itemNum-1;índice++)
{
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(índice=0;índice<itemNum;índice++)
{
pre=document.getElementById(aryItems[index]);
if(pre.getClientRects()[0].esquerda>=esquerda+unidade*max)
{
pre.style.left=esquerda+unidade*max-2;
pré.largura=unidade;
}
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;
}
}
}
função OnSubmit()
{
var t="";
for(índice=0;índice<itemNum;índice++)
{
t=t+((document.getElementById(aryItems[index]).getClientRects()[0].esquerda-esquerda)/unit).toString();
t=t+",";
t=t+(document.getElementById(aryItems[index]).width/unit).toString();
t=t+";";
}
document.getElementById("__Gantt").value=t;
}
document.onmousedown=OnDrag;
document.onmousemove=OnScale;
</script>
当有一个Button做表单提交的时候, 会先执行OnSubmit代码段。而在服务器端的操作就是把从客户端发送过来的东西原封不动地发挥去，其中可以加入对数据的修改过程，也可以是通过一进入页面就倒入数据而达到生成画面的目的。
Sub Button1_Click protegido () Sub Button1_Click (ByVal sender As Object, ByVal e As System.EventArgs) Manipula 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) Trata Me.Load
Se não forPostBack então
ClientScript.RegisterHiddenField("__Gantt", String.Empty)
Terminar se
End Sub希望对大家有用。