javascript关于拖拽div的有关问题-Java教程-爱易网页

javascript关于拖拽div的有关问题

日期：2014-05-17　浏览次数：20840 次

javascript关于拖拽div的问题
最近简单写了一个简单的关于拖拽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>

为什么只能拖拽一次，第二次会回初始位置。从左上角拖至图片位置：

第二次点击后回到左上角：

求解！！谢谢

JavaScript HTML?

------解决方案--------------------
调试了下，可以了。注意我打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=ev

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript关于拖拽div的有关问题

相关资料更多>

推荐阅读更多>