用來實現Web頁面圖片移動托拽的程式碼段

以下js專案主要是解決畫面產生Image，並透過滑鼠事件進行脫拽、移動等操作的程式碼。
<腳本語言=“javascript”類型=“text/javascript”>
var 頂部，左側；
var src,拖曳,dir,ope,refer,halfwidth;
變數單位=30；

var aryItems,itemNum=10,索引,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 length=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(track);
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[索引]=id；

var track = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");

document.body.appendChild(track);
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")
{
// OnTrim();
}
}
別的
{
如果（！拖曳）
{
src=事件.srcElement;
半寬=src.width/2;
拖曳=真；

// 方向の判斷
if(event.clientX<src.getClientRects()[0].left+halfwidth)
{
dir=「向後」；
參考=src.getClientRects()[0].left+src.width;
}
別的
{
dir=「轉發」；
參考=src.getClientRects()[0].left;
}

// 操作の判斷：１．
if(事件.shiftLeft)
{
ope=“移動”；
參考=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;
如果（標頭>0）
{
寬度=寬度+單位；
}
如果（尾部>0）
{
寬度=寬度+單位；
}
src.style.left=sleft;
src.width=寬度；
}

if(ope=="移動")
{
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
}

拖曳=假；
OnTrim()
}
}
}

函數 OnScale()
{
if(src!=null&&拖曳)
{
if(ope=="規模")
{
//縮小／拡大の場合
if(dir=="前進")
{
if(event.clientX-refer>=unit)
{
src.width=event.clientX-refer;
}
}
別的
{
if(refer-event.clientX>unit)
{
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(索引=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()
{
var t="";
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=OnScale；
</腳本>
當有一個按鈕做表單提交的時候，會先執行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希望對大家有用。