<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 完美拖拽-JavaScript </title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
}
#box{
width: 150px;
height: 150px;
background: blueviolet;
position: absolute;
top: 200px;
left: 200px;
}
#box span{
float: right;
line-height: 20px;
display: block;
width: 40px;
text-align: center;
background: greenyellow;
}
</style>
</head>
<body>
<div id="box">
<span id="back">回放</span>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
};
var arrX = [];
var arrY = [];
$("box").onmousedown = function(ev){
var ev = ev || window.event;
// 获取鼠标按下时的坐标
var reX = ev.offsetX || ev.layerX;
var reY = ev.offsetY || ev.layerY;
document.onmousemove = function(ev){
var ev = ev || window.event;
$("box").style.top = ev.pageY - reY + 'px';
$("box").style.left = ev.pageX - reX + 'px';
// 控制移动范围
if( $("box").offsetTop <= 0 ){
$("box").style.top = 0;
}else if( $("box").offsetTop >= document.body.offsetHeight - $("box").offsetHeight ){
$("box").style.top = document.body.offsetHeight - $("box").offsetHeight + 'px';
};
if( $("box").offsetLeft <= 0 ){
$("box").style.left = 0;
}else if( $("box").offsetLeft >= document.body.offsetWidth - $("box").offsetWidth ){
$("box").style.left = document.body.offsetWidth - $("box").offsetWidth + 'px';
};
arrY.push( $('box').offsetTop );
arrX.push( $('box').offsetLeft );
console.log(arrY);
};
};
document.onmouseup = function(){
document.onmousemove = null;
};
$("back").onclick = function(){
var timer = null;
var index = arrX.length - 1;
timer = setInterval(function(){
$("box").style.top = arrY[index--] + 'px';
$("box").style.left = arrX[index--] + 'px';
if( index<=0 ){
clearInterval(timer);
arrX = [];
arrY= [];
}
},50);
};
$("back").onmousedown = function(ev){
ev.stopPropagation();
};
</script>
</body>
</html>
网友评论