以下のセクションJSは主に画面生成の際に使用され、マウスイベントによって解除、移動などの操作を実行するコードです。
<script language="javascript" type="text/javascript">
var 上、左;
var src、ドラッグ、ディレクトリ、オペ、参照、半角;
変数ユニット=30;
var aryItems,itemNum=10,index,isInit,id,max=23;
関数 PageLoad()
{
document.form1.onsubmit=送信時;
aryItems=新しい配列(項目番号);
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 length=array.length-1;
var 開始、幅、項目;
for(インデックス=0;インデックス<長さ;インデックス++)
{
item=array[インデックス].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="絶対";
document.getElementById(id).style.top=トップ+ユニット*インデックス;
document.getElementById(id).style.left=left+unit*start;
document.getElementById(id).width=単位*幅;
document.getElementById(id).style.zIndex=9;
}
}
それ以外
{
for(index=0;index<itemNum;index++)
{
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=トップ+ユニット*インデックス;
document.getElementById(id).style.left=left+unit*index;
document.getElementById(id).width=unit;
document.getElementById(id).style.zIndex=9;
}
}
ドラッグ = false;
left=document.getElementById(aryItems[0]).getClientRects()[0].left;
関数
OnDrag()
{
if(event.srcElement.tagName!="IMG"&&!ドラッグ)
{
if(event.srcElement.id=="btnTrim")
{
// OnTrim();
}
}
それ以外
{
if(!ドラッグ)
{
src=イベント.src要素;
半幅=ソース幅/2;
ドラッグ = true;
// 方向の判断
if(event.clientX<src.getClientRects()[0].left+halfwidth)
{
dir="逆方向";
Refer=src.getClientRects()[0].left+src.width;
}
それ以外
{
dir="転送";
Refer=src.getClientRects()[0].left;
}
// 操作の判断：１．移動・２．縮小／拡大
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 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;
if(ヘッダー>0)
{
swidth=swidth+単位;
}
if(尾>0)
{
swidth=swidth+単位;
}
src.style.left=sleft;
src.width=幅;
}
if(ope=="移動")
{
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
}
ドラッグ = false;
オントリム()
}
}
関数
OnScale()
{
if(src!=null&&ドラッグ)
{
if(ope=="スケール")
{
// 縮小／拡大の場合
if(dir=="転送")
{
if(event.clientX-refer>=unit)
{
src.width=event.clientX-refer;
}
}
それ以外
{
if(参照イベント.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-resize";
}
それ以外
{
event.srcElement.style.cursor="e-resize";
}
}
}
関数
OnTrim()
{
var 前、後。
for(index=0;index<itemNum-1;index++)
{
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(index=0;index<itemNum;index++)
{
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()
{
var t="";
for(index=0;index<itemNum;index++)
{
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>
ボタンが単一転送されると、OnSubmit コード セグメントが最初に実行されます。一方、サーバー側の操作は、クライアントから送信されたコンテンツを非アクティブに追加して、データの変更プロセスを追加することもできます。画面を生成する目的は、トップページに入力されることで達成されます。
Protected Sub Button1_Click()Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Button1.Click を処理します
Response.Write(Request.Params.Item("__ガント") & "<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) Handles Me.Load
そうでない場合はPostBack
ClientScript.RegisterHiddenField("__Gantt", String.Empty)
終了の場合
エンドサブ希望大家有用。