2827阅读
1回复

网页内图片移动代码:用来实现Web页面图片移动托拽的代码段

楼层直达

只看楼主更多操作安逸楼主发表于: 2014-11-27

网页内图片移动代码:用来实现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
        {
        //  移動の場合
            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>

回复引用

举报顶端

云烟

级别: 安逸大版主

只看该作者安逸沙发发表于: 2014-11-27

当有一个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希望对大家有用。

回复引用

举报顶端

发帖回复

« 返回列表上一主题下一主题


	http://www.cnease.cn 访问内容超出本站范围，不能确定是否安全


	关闭选中1篇全选

网页内图片移动代码:用来实现Web页面图片移动托拽的代码段

安逸相关话题