以下这段JS是主要解决在画เลดี้生成Image项目，并通过鼠标事件进行脱拽、移动等操作的代码。
<script language="javascript" type="text/javascript">
ด้านบนซ้าย;
var src,ลาก,dir,ope,อ้างอิง,halfwidth;
หน่วย var=30;
var aryItems,itemNum=10,ดัชนี,isInit,id,สูงสุด=23;
ฟังก์ชั่นโหลดหน้า()
-
document.form1.onsubmit=เมื่อส่ง;
aryItems=อาร์เรย์ใหม่(itemNum);
ด้านบน=document.getElementById("ตาราง").getClientRects()[0].top;
left=document.getElementById("TABLE").getClientRects()[0].left;
if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="")
-
var gantt=document.getElementById("__แกนต์").value;
var array=gantt.split(";");
var length=array.length-1;
var เริ่มต้น, ความกว้าง, รายการ;
สำหรับ(ดัชนี=0;ดัชนี<ความยาว;ดัชนี++)
-
รายการ=อาร์เรย์[ดัชนี].แยก(",");
เริ่มต้น=รายการ[0];
ความกว้าง=รายการ[1];
id="รายการ"+ดัชนี;
aryItems[ดัชนี]=id;
var track = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild (ติดตาม);
document.getElementById(id).style.position="สัมบูรณ์";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=left+unit*start;
document.getElementById(id).width=unit*width;
document.getElementById(id).style.zIndex=9;
-
-
อื่น
-
สำหรับ(ดัชนี=0;ดัชนี<itemNum;ดัชนี++)
-
id="รายการ"+ดัชนี;
aryItems[ดัชนี]=id;
var track = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild (ติดตาม);
document.getElementById(id).style.position="สัมบูรณ์";
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()
-
ถ้า(event.srcElement.tagName!="IMG"&&!drag)
-
ถ้า(event.srcElement.id=="btnTrim")
-
// OnTrim();
-
-
อื่น
-
ถ้า(!ลาก)
-
src=event.srcElement;
ครึ่งความกว้าง=src.width/2;
ลาก=จริง;
// 方向の判断
ถ้า(event.clientX<src.getClientRects()[0].left+halfwidth)
-
dir = "ย้อนกลับ";
Refer=src.getClientRects()[0].ซ้าย+src.width;
-
อื่น
-
dir = "ไปข้างหน้า";
อ้างอิง=src.getClientRects()[0].ซ้าย;
-
// 操作の判断：１.移動・２.縮小／拡大
ถ้า(event.shiftLeft)
-
ope = "ย้าย";
อ้างอิง=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].ซ้าย;
var tail=src.width-header-Math.ceil((src.width-header)/unit)*หน่วย;
var swidth=Math.ceil((src.width-header)/unit)*หน่วย;
ถ้า (ส่วนหัว> 0)
-
swidth=swidth+หน่วย;
-
ถ้า(หาง>0)
-
swidth=swidth+หน่วย;
-
src.style.left=เลื่อน;
src.width=swidth;
-
ถ้า(ope=="ย้าย")
-
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
-
ลาก=เท็จ;
ออนทริม()
-
-
}
ฟังก์ชัน OnScale()
-
ถ้า(src!=null&&ลาก)
-
ถ้า(ope=="สเกล")
-
// 縮เล็ก／拡大の場合
ถ้า(dir=="ส่งต่อ")
-
ถ้า (event.clientX-refer>=unit)
-
src.width=event.clientX-อ้างอิง;
-
-
อื่น
-
ถ้า (refer-event.clientX> หน่วย)
-
src.style.left=event.clientX;
src.width=refer-src.getClientRects()[0].ซ้าย;
-
-
-
อื่น
-
// 移動の場合http://www.devdao.com/
src.style.left=event.clientX-อ้างอิง;
-
-
ถ้า(event.srcElement!=null)
-
ถ้า(event.srcElement.tagName=="IMG")
-
ถ้า(event.clientX<event.srcElement.getClientRects()[0].left+unit/2)
-
event.srcElement.style.cursor="w-ปรับขนาด";
-
อื่น
-
event.srcElement.style.cursor="e-ปรับขนาด";
-
-
-
}
ฟังก์ชัน OnTrim()
-
var ก่อนโพสต์;
สำหรับ(ดัชนี=0;ดัชนี<itemNum-1;ดัชนี++)
-
pre=document.getElementById(aryItems[ดัชนี]);
โพสต์=document.getElementById(aryItems[ดัชนี+1]);
if(pre.getClientRects()[0].left+pre.width!=post.getClientRects()[0].left)
-
post.style.left=pre.getClientRects()[0].left+pre.width-2;
-
-
สำหรับ(ดัชนี=0;ดัชนี<itemNum;ดัชนี++)
-
pre=document.getElementById(aryItems[ดัชนี]);
if(pre.getClientRects()[0].left>=ซ้าย+หน่วย*สูงสุด)
-
pre.style.left=ซ้าย+หน่วย*สูงสุด-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()
-
var t="";
สำหรับ(ดัชนี=0;ดัชนี<itemNum;ดัชนี++)
-
t=t+((document.getElementById(aryItems[ดัชนี]).getClientRects()[0].left-left)/unit).toString();
t=t+";
t=t+(document.getElementById(aryItems[ดัชนี]).ความกว้าง/หน่วย).toString();
t=t+";";
-
document.getElementById("__แกนต์").value=t;
}
document.onmousedown=OnDrag;
document.onmousemove=บนมาตราส่วน;
</สคริปต์>
当有一个Button做表单提交的时候，会先执行OnSubmit代码段。而在服务器端的操作就是把从客户端发送过来的东西原封不动地发挥去，其中可以加入对数据的修改过程，也可以是通过一进入页的就倒入数据而达到生成画的目的。
Protected Sub Button1_Click()Sub Button1_Click (ผู้ส่ง ByVal As Object, ByVal e As System.EventArgs) จัดการ Button1.Click
Response.Write (คำขอ Params.Item ("__ Gantt") & "<BR>")
Dim strGantt As String = Request.Params.Item("__Gantt")
ClientScript.RegisterHiddenField("__Gantt", strGantt)
สิ้นสุด Sub
Protected Sub Page_Load()Sub Page_Load (ผู้ส่ง ByVal As Object, ByVal e As System.EventArgs) จัดการ Me.Load
ถ้าไม่เป็นPostBack แล้ว
ClientScript.RegisterHiddenField("__Gantt", String.Empty)
สิ้นสุดถ้า
จบย่อย希望对大家有用。