本文实例讲述了javascript实现简单的鼠标拖动效果。分享给大家供大家参考。具体分析如下:
用鼠标拖动一个元素,放到网页的任意一个位置上,这是很常见的,例如很多博客模板版块位置可以自己拖动到相应位置。
下面先写一个简单的可以实现鼠标拖动的效果。
当鼠标按下的时候,记录鼠标当前位置和元素左边距离的差值。 当鼠标移动的时候,给元素的位置赋值,就是鼠标的位置,减去刚才的差值。 当鼠标放开的时候,给鼠标移动和鼠标放开赋值null,让它们不要再有任何动作。
要点一:
Box.offsetLeft;
要确定拖动的时候鼠标点在元素的位置,就是鼠标位置减去元素的左边距离。
要点二:
Box.style.left = oevent.clientX - disx + "px";
拖动时元素的位置,鼠标的当前位置减去前面刚计算的值。
好了,上代码:
再改进一下,上面的鼠标拖动没有限制范围,有时会拖动窗口外面看不见了。下面就限制下范围
要点一:如下,如果元素的左边位置小于0时,给它赋值为0,如果大于可视窗大小减去元素本身的宽度的,给它赋值为 可视窗大小减元素本身宽度的差值。
Boxl = oevent.clientX - disx;
if(Boxl < 0){
boxl =0;
}else if(boxl > vieww - Box.offsetWidth){
Boxl = vieww - Box.offsetWidth;
}
无标题文档
鼠标拖动
Box">
希望本文所述对大家的javascript程序设计有所帮助。