JavaScript 设计可拖曳的小方框
■知识点
鼠标拖曳包含以下3个事件。
mouseup:在释放按下的鼠标键时触发。
mousedown:在按下鼠标键时触发。
mousemove:是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动1个像素),就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢,以及浏览器跟踪更新的速度。
■实例设计
本例演示如何应用鼠标事件实现鼠标拖曳操作,设计方法如下。
定义拖放元素为绝对定位。
获取坐标位置:按下鼠标右键时的指针坐标,移动中当前鼠标的指针坐标,松开鼠标时的指针坐标,拖放元素的原始坐标,拖动中的元素坐标。
动态跟踪:按下鼠标右键时,获取被拖放元素和鼠标指针的位置,在移动中实时计算鼠标偏移的距离,并利用该偏移距离加上被拖放元素的原坐标位置,获得拖放元素的实时坐标。
■实例代码
<div id="box" ></div>
<script>
//初始化拖放对象
var box = document.getElementByld("box"); //获取页面中被拖放元素的引用指针
box.style.position = "absolute"; //绝对定位
box.style.width = "160px"; //定义宽度
box.style.height = "120px"; //定义高度
box.style.backgroundColor = "red"; //定义背景色
//初始化变:it,标准化事件对象
var mx, my, ox, oy; //定义备用变量
function e(event) { //定义事件对象标准化函数
if ( ! event) { //兼容IE事件模型
event = window.event;
event.target = event.srcElement;
event.layerX = event.offsetX;
event.layerY = event.offsetY;
}
event.mx = event.pageX || event.clientX + document.body.scrollLeft; //计算鼠标指针的x轴距离
event.my = event.pageY || event.clientY + document.body.scrollTop; //计算鼠标指针的y轴距离
return event; //返回标准化的事件对象
}
//定义鼠标事件处理函数
document.onmousedown = function(event){ //按下鼠标时,初始化处理
event = e(event); //获取标准事件对象
o = event.target; //获取当前拖放的元素
ox = parselnt(o.offsetLeft); //拖放元素的x轴坐标
oy = parselnt(o.offsetTop); //拖放元素的y轴坐标
mx = event.mx; //按下鼠标指针的x轴坐标
my = event.my; //按下鼠标指针的y轴坐标
document.onmousemove = move; //注册鼠标移动艰件处理函数
document.onmouseup = stop; //注册松开鼠标事件处理函数
}
function move (event){ //鼠标移动处理函数
event = e(event);
o.style.left = ox + event .mx - mx + "px"; //定义拖放元素的 x 轴距离
o.style.top = oy + event.my - my + "pxn; //定义拖放元素的 y 轴距离
}
function stop(event){ //松开鼠标处理函数
event = e (event);
ox = parselnt(o.offsetLeft); //记录拖放元素的x轴坐标
oy = parselnt(o.offsetTop); //记录拖放元素的y轴坐标
mx = event.mx; //记录鼠标指针的x轴坐标
my = event.my; //记录鼠标指针的y轴坐标
o = document.onmousemove = document.onmouseup = null; //释放所有操作对象
}
</script>
点击加载更多评论>>