用来实现web页面图片移动托拽的代码段_javascript教程

以下这段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希望对大家有用。