最近简单写了一个简单的关于拖拽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
<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
<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>
cx1=even.clientX-cx;
cy1=even.clientY-cy;
始终为0!所以每次都会回到左上角
<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>
你可以看看这个。。更简单一点
在ie下没法用,给e.pageX 和e.pageY 改成 e.offsetX 和e.offsetY;