欢迎光临
我们一直在努力

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

建站超值云服务器,限时71元/月

以下这段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;
            }
           
            //  操作の判断:1.移動・2.縮小/拡大
            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希望对大家有用。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 用来实现web页面图片移动托拽的代码段_javascript教程
分享到: 更多 (0)