<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isStart; //获取鼠标单击时的坐标x,y
var xMouseDown;
var yMouseDown;
function downMouse(){
isStart = true;
if (isStart) {
//鼠标起始位置
xMouseDown = window.event.clientX;
yMouseDown = window.event.clientY;
}
}

//结束事件
function upMouse() {
isStart = false;
}

//拖动
var xMouseMove;
var yMouseMove;
var left;
var top;
function move() {
if (isStart) {
//鼠标当前位置
xMouseMove = window.event.clientX;
yMouseMove = window.event.clientY;
//计算鼠标移动距离
left = xMouseMove - xMouseDown;
top = yMouseMove - yMouseDown;
document.getElementById("pad").style.left = document.getElementById("pad").style.pixelLeft + left;
document.getElementById("pad").style.top = document.getElementById("pad").style.pixelTop + top;
}
}

function textMove() {
document.onmousedown = downMouse;
document.onmousemove = move;
document.onmouseup = upMouse;
}
//-->
</SCRIPT>
 <BODY>
  <div id="pad" style="width:100px;height:100px;left:10px;top:160px;background-color:#ff0000;position:absolute;z-index:100;" onmousedown="textMove()"></div>
 </BODY>
</HTML>这段代码中,每一次onmousemove操作时,就不断执行move()函数,这样导致鼠标移动一段距离后,DIV层不断以鼠标移动的相对距离来改变层的位置,如何才能DIV层只执行1次移动,感觉就像是10加一个数,我只需要它加一次就行了,可是这段代码就是在不停地重复累加。需要怎么修改代码?

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">  </style>
     </HEAD> <BODY>
      <div id="pad" style=" cursor:move;width:100px;height:100px;left:10px;top:160px;background-color:#ff0000;position:absolute;z-index:100; " onmousedown="textMove(this)" ></div>
     </BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var isStart;//获取鼠标单击时的坐标x,y
    var xMouseDown=null;
    var yMouseDown=null;
    function downMouse(e,obj){
    isStart = true;
    if (isStart) {
    //鼠标起始位置
    obj.setCapture();
    xMouseDown = e.clientX ;
    yMouseDown =e.clientY ;
    }
    }//结束事件
    function upMouse(obj) {
    isStart = false;
    obj.releaseCapture(); 
    }//拖动
    var xMouseMove;
    var yMouseMove;
    var left;
    var top;function move(e) {
    if (isStart) {
    //鼠标当前位置
    xMouseMove = e.clientX;
    yMouseMove = e.clientY;
    //计算鼠标移动距离
    left = xMouseMove - xMouseDown;
    top = yMouseMove - yMouseDown;
    document.getElementById("pad").style.left = document.documentElement.scrollLeft+ left+"px";
    document.getElementById("pad").style.top = document.documentElement.scrollTop+ top+'px';
    }
    }function textMove(obj) {
    window.onmousedown=function(e){
    downMouse(e,obj);
    };
    window.onmousemove=move;
    window.onmouseup=function(){
    upMouse(obj);
    };
    }
    //-->
    </SCRIPT>
    </HTML>