说明:代码取自网络,注释为原文所有!
<!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 {d
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">
window.onload=function ()
{
var oBox=document.getElementById("box");
var oH2 = oBox.getElementsByTagName("h2")[0];
var oA = oBox.getElementsByTagName("a")[0];
var aSpan = oBox.getElementsByTagName("span");
var disX = disY = 0;
var bDrag = false;
var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}]
//鼠标按下, 激活拖拽
oH2.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oBox.offsetLeft;
disY = event.clientY - oBox.offsetTop;
aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop})
this.setCapture && this.setCapture();
return false
};
//拖拽开始
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oBox.style.marginTop = oBox.style.marginLeft = 0;
oBox.style.left = iL + "px";
oBox.style.top = iT + "px";
aPos.push({x:iL, y:iT})
status();
return false
};
//鼠标释放, 结束拖拽
document.onmouseup = window.onblur = oH2.onlosecapture = function ()
{
bDrag = false;
oH2.releaseCapture && oH2.releaseCapture();
status()
};
//回放拖动轨迹
oA.onclick = function ()
{
if (aPos.length == 1) return;
var timer = setInterval(function ()
{
var oPos = aPos.pop();
oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)
}, 30);
this.focus = false;//去除链接虚线
return false
};
//阻止冒泡
oA.onmousedown = function (event)
{
(event || window.event).cancelBubble = true
};
//监听状态函数
function status ()
{
aSpan[0].innerHTML = bDrag;
aSpan[1].innerHTML = oBox.offsetTop;
aSpan[2].innerHTML = oBox.offsetLeft
}
//初始调用
status()
};
</script>
</head>
<body>
<div id="box">
<h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
<p><strong>Drag:</strong><span></span></p>
<p><strong>offsetTop:</strong><span></span></p>
<p><strong>offsetLeft:</strong><span></span></p>
</div>
</body>
</html>
View Code
转载于:https://www.cnblogs.com/sx00xs/p/6488040.html