完美拖曳,效果如图所示
拖曳,点击a标签,可按刚才的轨迹原路返回
html
<!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>
<script type="text/javascript">
</script>
</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="common.js"></script>
<script>
let $head = $('#tz');
let $box = $('#box');
let $a1 = $('#a1');
let arr = [];
let l,t;
$head.onmousedown = function (e) {
e = e || window.event;
let x = e.offsetX;
let y = e.offsetY;
document.onmousemove = function (e) {
e = e || window.event;
l = e.pageX - x;
t = e.pageY - y;
//数组储存运动轨迹
var obj = { left: l, top: t };
arr.push(obj);
console.log(obj, arr);
$box.style.left = l + 'px';
$box.style.top = t + 'px';
//阻止冒泡
return false;
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
let index = 0;
$a1.onmousedown = function () {
$box.style.left = l + 'px';
$box.style.top = t + 'px';
if (arr.length > 0) {
let timer = setInterval(function () {
index ++;
console.log(arr[arr.length - index].left,arr[arr.length - index].top)
$box.style.left = arr[arr.length - index].left + 'px';
$box.style.top = arr[arr.length - index].top + 'px';
//清空上一次保存在数组里的轨迹
if(index == arr.length){
clearInterval(timer);
data = [];
index = 0;
}
}, 20)
}
}
</script>
common.js
// 判断数组是否还有这个元素
function include(arr, item) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] === item) {
return true;
}
}
return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] === item) {
return i;
}
}
return -1;
}
// 任意区间随机整数
function getRandom(max, min) {
min = min || 0;
if(min > max) {
var a = min;
min = max;
max = a;
}
return min + Math.floor(Math.random() * (max - min + 1));
}
// 数组去重
function noRepeat(arr) {
var __arr = [];
for(var i = 0; i < arr.length; i++) {
// 存在返回true, 不存在返回false
var bool = __arr.indexOf(arr[i])
if(bool == -1) {
__arr.push(arr[i]);
}
}
return __arr;
}
function $(ele) {
return document.querySelector(ele);
}
function $A(ele) {
return document.querySelectorAll(ele);
}
function getRandomColor() {
var str = '0123456789abcdef';
var color = '#';
for(var i = 0; i < 6; i++) {
color += str[getRandom(str.length - 1)];
}
return color;
}
// 格式化url, 获取参数
function parseUrl(url) {
var obj = {};
url = url.split('?')[1].split('#')[0];
url = url.split('&');
url.forEach(function (x) {
var arr = x.split('=');
obj[arr[0]] = arr[1];
})
return obj;
}
// 获取非行内样式
function getStyle(ele, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr]
}
return ele.currentStyle[attr];
}
