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

以下這段JS是主要解決在畫面生成Image項目，並通過鼠標事件進行脫拽、移動等操作的代碼。
<script language="Javascript" type="text/Javascript">
var top,left;
var src,drag,dir,ope,refer,halfwidth;
var unit=30;

var aryItems,itemNum=10,index,isInit,id,max=23;

function 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").value;
        var array=gantt.split(";");
        var length=array.length-1;
        var start,width,item;
       
        for(index=0;index<length;index++)
        {
            item=array[index].split(",");
            start=item[0];
            width=item[1];
           
            id="Item"+index;
            aryItems[index]=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=unit*width;
            document.getElementById(id).style.zIndex=9;
        }
    }
    else
    {
        for(index=0;index<itemNum;index++)
        {
            id="Item"+index;
            aryItems[index]=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;
        }
    }
    drag=false;
    left=document.getElementById(aryItems[0]).getClIEntRects()[0].left;
}

function OnDrag()
{
    if(event.srcElement.tagName!="IMG"&&!drag)
    {
        if(event.srcElement.id=="BTnTrim")
        {
//            OnTrim();
        }
    }
    else
    {
        if(!drag)
        {
            src=event.srcElement;
            halfwidth=src.width/2;
            drag=true;
           
            //  方向の判斷
            if(event.clientX<src.getClIEntRects()[0].left+halfwidth)
            {
                dir="Backward";
                refer=src.getClIEntRects()[0].left+src.width;
            }
            else
            {
                dir="Forward";
                refer=src.getClIEntRects()[0].left;
            }
           
            //  操作の判斷：１．移動・２．縮小／拡大
            if(event.shiftLeft)
            {
                ope="Move";
                refer=event.clientX-src.getClIEntRects()[0].left;
            }
            else
            {
                ope="Scale";
            }
        }
        else
        {
            if(ope=="Scale")
            {
                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(header>0)
                {
                    swidth=swidth+unit;
                }
                if(tail>0)
                {
                    swidth=swidth+unit;
                }
                src.style.left=sleft;
                src.width=swidth;
            }
           
            if(ope=="Move")
            {
                src.style.left=Math.ceil((src.getClIEntRects()[0].left-left)/unit-1)*unit+left;
            }
           
            drag=false;
            OnTrim()
        }
    }
}

function OnScale()
{
    if(src!=null&&drag)
    {
        if(ope=="Scale")
        {
        //  縮小／拡大の場合
            if(dir=="Forward")
            {
                if(event.clIEntX-refer>=unit)
                {
                    src.width=event.clIEntX-refer;
                }
            }
            else
            {
                if(refer-event.clIEntX>unit)
                {
                    src.style.left=event.clIEntX;
                    src.width=refer-src.getClIEntRects()[0].left;
                }
            }
        }
        else
        {
        //  移動の場合 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";
            }
            else
            {
                event.srcElement.style.cursor="e-resize";
            }
        }
    }
}

function OnTrim()
{
    var pre,post;
    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=unit;
        }
       
        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;
        }
    }
}

function 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=OnScale;
</script>
當有一個Button做表單提交的時候，會先執行OnSubmit代碼段。而在服務器端的操作就是把從客戶端發送過來的東西原封不動地發揮去，其中可以加入對數據的修改過程，也可以是通過一進入頁面就倒入數據而達到生成畫面的目的。
    Protected Sub Button1_Click()Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles 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) Handles Me.Load
        If Not IsPostBack Then
            ClientScript.RegisterHiddenFIEld("__Gantt", String.Empty)
        End If
    End Sub希望對大家有用。