一、原理
onmousemove实时获取鼠标坐标,定时器刷新dom元素坐标。能较快实现拖拽。
注意:在较大幅度晃动鼠标时仍然会失效,元素尺寸越小拖拽效果越差(即元素拖拽速度越慢)。
二、代码
<html>
<div id="test" style="position:fixed;left:100px;top:100px;background-color:black;width:100px;height:100px;"></div>
<script>
var dom=document.getElementById('test');
var initX,initY,//初始坐标,鼠标相对元素的坐标
timer,//定时器
refreshRate=250;//刷新率250
var mx,my;//当前鼠标坐标
dom.onmousedown = function (event) {
var p=getElPosition(dom);//获取dom初始坐标
initX=event.clientX-p.x;
initY=event.clientY-p.y;
//console.log(initX,initY,event.clientX,event.clientY);
timer=setInterval(function(){
checkMove(event)
},1000/refreshRate);
}
dom.onmousemove=function(event){//刷新鼠标当前坐标
mx=event.clientX;
my=event.clientY;
}
dom.onmouseup = function () {//移除定时器
clearInterval(timer);
}
dom.onmouseout = function () {//移除定时器
clearInterval(timer);
}
var checkMove = function (event) {//刷新元素显示
// 移动事件
// mx// 当前鼠标距离屏幕X的距离
//my // 当前鼠标距离屏幕Y的距离
// 获取页面宽高
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
// 获取盒子宽高
var boxH = dom.offsetHeight;
var boxW = dom.offsetWidth;
//可移动距离
var avX = -initX + mx, avY = -initY + my;
//console.log(bodyH,bodyW)
console.log(666,event.clientX,event.clientY)
if (avX < 0) avX = 0;
if (avY < 0) avY = 0;
if (boxW - initX + mx > bodyW) avX = bodyW - boxW;
if (boxH - initY + my > bodyH) avY = bodyH - boxH;
//修改元素坐标
dom.style.left = avX + 'px';
dom.style.top = avY + 'px';
//console.log(avX,avY,mx,my)
};
var getElPosition = function(el){//获取元素绝对坐标,el为元素
var t = el.offsetTop,
l = el.offsetLeft;
while( el = el.offsetParent){
t += el.offsetTop;
l += el.offsetLeft;
}
return {
x : l ,
y : t
};
};
</script>
</html>
总结
比只使用事件机制提高了一些,元素越大效果越好。