以下这段JS是主要解决는페이지생성에서 Image 项目, 并过鼠标事件进行脱拽, 移动等操操작성적인대신입니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
var 상단,왼쪽;
var src,drag,dir,ope,refer,halfwidth;
var 단위=30;
var aryItems,itemNum=10,index,isInit,id,max=23;
함수 페이지로드()
{
document.form1.onsubmit=OnSubmit;
aryItems=새 배열(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").value;
var array=gantt.split(";");
var 길이=array.length-1;
var 시작, 너비, 항목;
for(색인=0;색인<길이;색인++)
{
item=array[index].split(",");
시작=항목[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="absolute";
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;
}
}
또 다른
{
for(색인=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="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"&&!drag)
{
if(event.srcElement.id=="btnTrim")
{
// 온트림();
}
}
또 다른
{
if(!드래그)
{
src=event.srcElement;
반폭=src.width/2;
드래그=참;
// 방향전환
if(event.clientX<src.getClientRects()[0].left+halfwidth)
{
dir="뒤로";
Refer=src.getClientRects()[0].left+src.width;
}
또 다른
{
dir="앞으로";
Refer=src.getClientRects()[0].left;
}
// 操작품노判断：1.移동・2.縮소/拡大
if(event.shiftLeft)
{
ope="이동";
Refer=event.clientX-src.getClientRects()[0].left;
}
또 다른
{
ope="규모";
}
}
또 다른
{
if(ope=="규모")
{
var sleft=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
var 헤더=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;
if(헤더>0)
{
폭=폭+단위;
}
if(꼬리>0)
{
폭=폭+단위;
}
src.style.left=왼쪽;
src.width=폭;
}
if(ope=="이동")
{
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
}
드래그=거짓;
온트림()
}
}
}
함수 OnScale()
{
if(src!=null&드래그)
{
if(ope=="규모")
{
// 縮小/拡大の場합
if(dir=="앞으로")
{
if(event.clientX-refer>=단위)
{
src.width=event.clientX-refer;
}
}
또 다른
{
if(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;
}
}
if(event.srcElement!=null)
{
if(event.srcElement.tagName=="IMG")
{
if(event.clientX<event.srcElement.getClientRects()[0].left+unit/2)
{
event.srcElement.style.cursor="w-크기 조정";
}
또 다른
{
event.srcElement.style.cursor="e-resize";
}
}
}
}
함수 OnTrim()
{
var 사전, 게시;
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=왼쪽+단위*최대-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()
{
vart="";
for(색인=0;색인<itemNum;색인++)
{
t=t+((document.getElementById(aryItems[index]).getClientRects()[0].left-left)/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=온스케일;
</script>
当有一个Button은 做表单提交的时候, 会先执行OnSubmit代码段입니다.地发挥去，其中可以加入对数据的修改过程，也可以是모든 것이 완벽하게 이루어집니다.
보호된 하위 Button1_Click()Sub Button1_Click(ByVal 보낸 사람은 개체로, ByVal e는 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를 처리합니다.
IsPost가 아닌 경우뒤로
ClientScript.RegisterHiddenField("__Gantt", String.Empty)
종료 조건
End Sub는 가족 모두를 위한 것입니다.