许愿墙上的贴纸鼠标按下能移动   代码怎么写? 

解决方案 »

  1.   

    又来问?Jquery 里又现成的插件。又或者 js 移动 div.不要在这里找现成能符合你答案的代码。google上又许多,如果那些你看不懂 那么贴给你也是白贴。不懂就从基础学起,要不然永远都不会,永远都要求代码。
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>移动Div层</title></head>
    <body onmousemove="window.status = 'X='+event.x+'Y='+event.y">
        <form id="form1" runat="server">
        <div>
     <div id="panl" style='position: absolute; left: 0px; top:0px ; background-color:Blue; width:900px ; height:600px ;'>
        </div>
            <input id="Button1" style="position:absolute; left: 0px; top:300px ; width:50px ; height:40px; " type="button" value="添加" onclick="addDiv()" />
            <input id="Button2" style="position:absolute; left:50px; top:300px; width:50px; height:40px;"  type="button" value="显示" onclick="saveDiv()">
        </div>
        <script language="javascript" type="text/javascript">
     // Arnold Elric  Date:07-10-10 
    var myArray=new Array;  //全局变量
    var Obj='';
    var px=0;
    var py=0;
    var i=1;
    function addDiv() //添加Div
    {var Name="Name"+i;
    var x=Math.floor(Math.random()*(900-70));
    var y=Math.floor(Math.random()*(600-70));
    var arr=new Array();
    arr[0]=Name;
    arr[1]=x;
    arr[2]=y;
    myArray[myArray.length]=arr;var str='';
    str+="<div id="+Name+" style='position: absolute; left:"+x+"px; top:"+y+"px; background-color:Red; width:70px; height:70px;   ' onmousedown=MD(this) onmousemove=MM() onmouseup=MU() ><input id='img"+Name+" ' style=' width:30px; height:25px; 'type='button' value='关闭' onclick=closeDiv("+Name+") ></div></div>";
    var Div=document.getElementById("panl");
    Div.insertAdjacentHTML('beforeEnd',str);
    i++;
    }
    function saveDiv() //显示Div 
    {
     var str='';
     for(var i=0;i<myArray.length;i++)
     {
      str+="id: "+myArray[i][0]+" left:"+myArray[i][1]+"px"+" top:"+myArray[i][2]+"px"+"\n";
     }
      alert(str);
    }
    function closeDiv(DivID)  //关闭Div
    {
     deleteDate(DivID);
     var div=document.getElementById("panl");
     div.removeChild(DivID);
    }
    function MD(object) //鼠标放下
    {
     Obj=object.id;
     document.all(Obj).setCapture();
     px=event.x-document.all(Obj).style.pixelLeft; // 计算鼠标偏移
     py=event.y-document.all(Obj).style.pixelTop;  
    }
    function MM()   //鼠标移动
    {
      if(Obj!='')
     {
      document.all(Obj).style.left=event.x-px;
      document.all(Obj).style.top=event.y-py;
      }
    }
    function MU() //鼠标抬起
    {
     if(Obj!='')
     {
      document.all(Obj).releaseCapture();
      changeDate();
      Obj='';
     }
    }
    function changeDate() //移动Div后 改变数组中的值
    {
     for(var i=0;i<myArray.length;i++)
     {
      if(Obj==myArray[i][0])
      {
       myArray[i][1]=event.x-px;
       myArray[i][2]=event.y-py;
      }
     }
    }function deleteDate(DivID)//删除存在数组中的那条Div 纪录
    {
     for(var i=0;i<myArray.length;i++)
     {
      if(DivID.id==myArray[i][0])
      {
       myArray.splice(i,1);
      }
     }}</script>
        </form>
    </body>
    </html>