2019-08-09
21:54:40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>完美拖拽</title>
<style type="text/css">
html,
body {
overflow: hidden;
}
body,
div,
h2,
p {
margin: 0;
padding: 0;
}
body {
color: #fff;
background: #000;
font: 12px/2 Arial;
}
p {
padding: 0 10px;
margin-top: 10px;
}
span {
color: #ff0;
padding-left: 5px;
}
#box {
position: absolute;
width: 300px;
height: 150px;
background: #333;
border: 2px solid #ccc;
top: 50%;
left: 50%;
margin: -75px 0 0 -150px;
}
#box h2 {
height: 25px;
cursor: move;
background: #222;
border-bottom: 2px solid #ccc;
text-align: right;
padding: 0 10px;
}
#box h2 a {
color: #fff;
font: 12px/25px Arial;
text-decoration: none;
outline: none;
}
</style>
</head>
<body>
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
<h2 id="tz"><a href="javascript:;" id="a1">点击回放拖动轨迹</a></h2>
<p><strong>Drag:</strong><span>false</span></p>
<p><strong>offsetTop:</strong><span>231</span></p>
<p><strong>offsetLeft:</strong><span>533</span></p>
</div>
</body></html>
<script src="../public.js"></script>
<script>
var tz = $id("tz");
var a1 = $id("a1");
var box = $id("box");
var p = document.getElementsByTagName("p")
var positionArr = [];
tz.onmousedown = function(eve){
var e = eve || event;
var x = e.offsetX;
var y = e.offsetY;
p[0].childNodes[1].innerHTML = "ture"
document.onmousemove = function(eve){
var e = eve || event;
var l = e.clientX - x;
var t = e.clientY - y;
//保存轨迹
positionArr.push({left:l,top:t});
box.style.left = l + "px";
box.style.top = t + "px";
return false;
}
document.onmouseup = function(){
this.onmousemove = null;
console.log(positionArr);
p[0].childNodes[1].innerHTML = "flase";
}
}
a1.onclick = function(){
//没有拖拽就不需要回放
if(positionArr.length > 0){
var index = 0;
//根据拖拽时产生的坐标轨迹从后往前慢慢赋值
var timer = setInterval(function(){
index++;
box.style.left = positionArr[positionArr.length-index].left + "px";
box.style.top = positionArr[positionArr.length-index].top + "px";
if(index == positionArr.length){
clearInterval(timer);
//清除原来的轨迹
positionArr.length = 0;
}
},10);
}
}
</script>
（有两个方案，不过这个更简洁，所以发这个给各位看官。今日心情不佳，如有需要源代码，可以给我留言）
原文地址：https://www.cnblogs.com/g-code/p/11329803.html
时间： 2024-10-28 11:47:30