js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数_布局与层

WBOY

Freigeben： 2016-05-16 17:45:34

Original

1281 Leute haben es durchsucht

//拖拽开始 
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> 
 
 
<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]