最近简单写了一个简单的关于拖拽div的js脚本如下:<html>
 <head>
  <title> New Document </title>
 <style type="text/css">
  body{margin:0}
.drag{width:40px;height:40px;background:#123321;position:relative}
 </style>
 </head> <body>
  <div id="drag" class="drag" onmousedown="move(event)" onmousemove="upmove(event)" onmouseup="stopdrag(event)"></div>
  <script type="text/javascript">
  var x,y,cx,cy;
  var down=false;
function move(event){
var even=event?event:window.event;
var drag=document.getElementById("drag");
x=drag.offsetLeft;
y=drag.offsetTop;
cx=even.clientX;
cy=even.clientY;
down=true;
}
var cx1,cy1;
function upmove(event){
var even=event?event:window.event;
var drag=document.getElementById("drag");
if(down){
cx1=even.clientX-cx;
cy1=even.clientY-cy;
drag.style.left=cx1+"px";
drag.style.top=cy1+"px";
}
}
function stopdrag(event){
  var even=event?event:window.event;
  var drag=document.getElementById("drag");
    down=false;
drag.id="drag";
    drag.style.left=cx1+"px";
    drag.style.top=cy1+"px";
  }
  </script>
 </body>
</html>为什么只能拖拽一次,第二次会回初始位置。从左上角拖至图片位置:第二次点击后回到左上角:求解!!谢谢JavaScriptHTML 

解决方案 »

  1.   

    调试了下,可以了。注意我打log的地方:<html>
     <head>
      <title> New Document </title>
     <style type="text/css">
      body{margin:0}
        .drag{width:40px;height:40px;background:#123321;position:relative}
     </style>
     </head>
     
     <body>
      <div id="drag" class="drag" onmousedown="move(event)" onmousemove="upmove(event)" onmouseup="stopdrag(event)"></div>
      <script type="text/javascript">
          var x,y,cx,cy;
          var down=false;
      var time=0;
        function move(event){
            var even=event?event:window.event;
            var drag=document.getElementById("drag");
            x=drag.offsetLeft;
            y=drag.offsetTop;
            cx=even.clientX;
            cy=even.clientY;
    console.log("cx:"+cx);
    console.log("cy:"+cy);
            down=true;
        }
        var cx1,cy1;
        function upmove(event){
            var even=event?event:window.event;
            var drag=document.getElementById("drag");
            if(down){
    if(time == 0){
                cx1=even.clientX-cx;
                cy1=even.clientY-cy;
    }else{
    cx1=even.clientX-10;
                cy1=even.clientY-10;
    }
    console.log("even.clientX:"+even.clientX);
    console.log("even.clientY:"+even.clientY);
    console.log("cx1:"+cx1);
    console.log("cy1:"+cy1);
                drag.style.left=cx1+"px";
                drag.style.top=cy1+"px";
    time++;
            }
        }
        function stopdrag(event){
          var even=event?event:window.event;
          var drag=document.getElementById("drag");
            down=false;
            drag.id="drag";
            drag.style.left=cx1+"px";
            drag.style.top=cy1+"px";
      }
      </script>
     </body>
    </html>
      

  2.   

    第二次点下去准备拖动的时候:
    cx1=even.clientX-cx;
                cy1=even.clientY-cy;
    始终为0!所以每次都会回到左上角
      

  3.   

    貌似会出现类似onmouseover事件的情况,如div会出现在onmouseup事件发生后鼠标移动到div上,div不需点击仍可以随箭头运动。
      

  4.   

    你每次点击的时候。。cx与cy会被赋值,而赋值与移动触发的事件的event是一样的。所以这个时候就成0了。。所以也就最上去了
      

  5.   

    <html>
     <head>
      <title> New Document </title>
     <style type="text/css">
      body{margin:0}
    .drag{width:40px;height:40px;background:#123321;position:relative}
     </style>
     </head> <body>
      <div id="drag" class="drag"></div>
      <script type="text/javascript">
    var isDown =false;
    var doc = document.documentElement || document.body,
    dragDiv = document.getElementById("drag");
    doc.onmousemove = function(e){
    if(isDown){
    e = e || window.event || Event;
    dragDiv.style.left = e.pageX;
    dragDiv.style.top = e.pageY;
    }
    }
    doc.onmouseup = function(){
    isDown = false;
    }

    var drag = document.getElementById("drag");
    drag.onmousedown = function(){
    isDown = true;
    }
      </script>
     </body>
    </html>
    你可以看看这个。。更简单一点
      

  6.   


    在ie下没法用,给e.pageX 和e.pageY  改成 e.offsetX 和e.offsetY;