这个是怎么实现的?

网页上,在某个区域内用鼠标拖动不同图片来组合应该是脚本实现的,谁能给个源码例子

解决方案 »

  1.   

    try这个
    ===============================
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    <HEAD>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <Script Language="JavaScript"> var DivCount = 2;
    var IsDivDropArray = new Array(DivCount); for(var i=0; i<DivCount; i++)
    {
        IsDivDropArray[i] = false;
    } function SetDivDrop(num)
    {
      if(event.button == 1)
      {
    IsDivDropArray[num] = !IsDivDropArray[num];
      }
    } function moveDiv(num)
    {
       divstr = "div"+num;
       imagestr = "image"+num;
       nowdiv = document.getElementById(divstr);
       nowimg = document.getElementById(imagestr);
       if(IsDivDropArray[num])
       {
    //nowdiv.style.top=event.y - (nowimg.height)/2;
    //nowdiv.style.left=event.x - (nowimg.width)/2;

    divtop = parseInt(nowdiv.style.top) + event.offsetY - (nowimg.height)/2;
    divleft = parseInt(nowdiv.style.left) + event.offsetX - (nowimg.width)/2;
    nowdiv.style.top = divtop;
        nowdiv.style.left = divleft;

       }
    }


    </Script>
    </HEAD>
    <body MS_POSITIONING="GridLayout" oncontextmenu="return false" ondragstart="return false"
    onselectstart="return false">
    <noscript>
    </noscript>
    <form id="Form1" method="post" runat="server">
    <div runat="server" id="div0" style="Z-INDEX:1001;FILTER:Alpha(opacity=200,finishOpacity=0,style=2);LEFT:100px;CURSOR:hand;POSITION:absolute;TOP:100px"
    onmousedown="SetDivDrop(0);" onmousemove="moveDiv(0);">
    <img id="image0" src="图章.gif">
    </div>
    <div runat="server" id="div1" style="Z-INDEX:1002;FILTER:Alpha(opacity=200,finishOpacity=0,style=2);LEFT:150px;CURSOR:hand;POSITION:absolute;TOP:150px"
    onmousedown="SetDivDrop(1);" onmousemove="moveDiv(1);">
    <img id="image1" src="图章.gif">
    </div>
    <div runat="server" id="div2" style="Z-INDEX:1003;FILTER:Alpha(opacity=200,finishOpacity=0,style=2);LEFT:200px;CURSOR:hand;POSITION:absolute;TOP:200px"
    onmousedown="SetDivDrop(2);" onmousemove="moveDiv(2);">
    <img id="image2" src="图章.gif">
    </div>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    asdfasdaaaaaaaaaaaaaaaaaaafasdfasdfsadfsdf<br>
    <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 136px; POSITION: absolute; TOP: 296px" runat="server"
    Text="Button"></asp:Button>
    <asp:LinkButton id="LinkButton1" style="Z-INDEX: 105; LEFT: 232px; POSITION: absolute; TOP: 272px"
    runat="server">LinkButton</asp:LinkButton>
    </form>

    </body>
    </HTML>
    <div id="Div3" style="Z-INDEX:1004;FILTER:Alpha(opacity=200,finishOpacity=0,style=2);LEFT:240px;CURSOR:hand;POSITION:absolute;TOP:240px"
    onmousedown="SetDivDrop(3);" onmousemove="moveDiv(3);">
    <img id="image3" src="图章.gif">
    </div>