HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回
预览
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>拖曳并按照原轨迹返回</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
<script type="text/javascript">
// 拖曳对象
var _box = document.getElementById("box");
// 启用对象移动的位置记录
var _bl = false;
// 恢复轨迹锁
var his = false;
// 对象移动的x轴数组
var x_sz = [];
// 对象移动的y轴数组
var y_sz = [];
// 拖曳总时长
var timer = "";
// 记录最开始的位置
var start_x = _box.offsetLeft;
var start_y = _box.offsetTop;
// 对象被点击，实现拖曳
_box.onmousedown = function (e) {
// 如果锁启用则点击失效
if (his) {
return;
}
// 开始手动校准位置
_box.style.left = start_x + "px";
_box.style.top = start_y + "px";
// 开启x,y记录
_bl = true;
// 记录当前时间戳
timer = new Date().getTime();
// 记录当前点距离对象的左边距距离
var _x = e.offsetX;
// 记录当前点距离对象的上边距距离
var _y = e.offsetY;
// 拖曳过程函数
onmove = false;
document.onmousemove = function (e) {
// 如果记录锁被启用
if (_bl) {
// 当前位置x
var cache_x = e.clientX - _x;
// 当前位置y
var cache_y = e.clientY - _y;
// 数组后追加当前在浏览器当前位置x轴
x_sz.push(cache_x);
// 数组后追加当前在浏览器当前位置y轴
y_sz.push(cache_y);
//重新设定位置
_box.style.left = cache_x + "px";
_box.style.top = cache_y + "px";
}
};
};
// 鼠标弹起，拖曳结束
_box.onmouseup = function () {
// 如果锁启用则点击失效
if (his) {
return;
}
// 记录关闭
_bl = false;
// 取当前时间戳，并且计算毫秒
timer = new Date().getTime() - timer;
// 取数组总个数
var sz_len = x_sz.length - 1;
// 计算定时器间隔
var dsq_time = Math.round(timer / sz_len);
// 防止定时器叠加，清除定时器
clearInterval(dsq);
// 启动恢复锁
his = true;
// 恢复轨迹函数
var dsq = setInterval(function () {
// 数组遍历完毕
if (sz_len <= 0) {
x_sz = [];
y_sz = [];
// 结束手动校准位置
_box.style.left = start_x + "px";
_box.style.top = start_y + "px";
// 关闭恢复锁
his = false;
// 清除定时器
clearInterval(dsq);
return;
}
_box.style.left = x_sz[sz_len] + "px";
_box.style.top = y_sz[sz_len] + "px";
sz_len--;
}, dsq_time);
};
</script>
</html>
评论 (0)