javascript实现简单的鼠标拖动效果实例

来源: 电脑维修教程 阅读:     发表时间:

javascript实现简单的鼠标拖动效果,实例阐明了javascript鼠标拖动效果的相关要点与实现技巧,非常具有实用价值,需要的伴侣可以参考下 本文实例讲述了javas

javascript实现简单的鼠标拖动效果,实例阐明了javascript鼠标拖动效果的相关要点与实现技巧,非常具有实用价值,需要的伴侣可以参考下

本文实例讲述了javascript实现简单的鼠标拖动效果。分享给各人供各人参考。具体阐明如下:

用鼠标拖动一个元素,放到网页的任意一个位置上,这是很常见的,例如很多博客模板版块位置可以本身拖动到相应位置。

下面先写一个简单的可以实现鼠标拖动的效果。

当鼠标按下的时候,记录鼠标当前位置和元素左边距离的差值。

当鼠标移动的时候,给元素的位置赋值,就是鼠标的位置,减去刚才的差值。

当鼠标放开的时候,给鼠标移动和鼠标放开赋值null,让它们不要再有任何行动。

要点一:

disx = oevent.clientx - box.offsetleft;

要确定拖动的时候鼠标点在元素的位置,就是鼠标位置减去元素的左边距离。

要点二:

box.style.left = oevent.clientx - disx + "px";

拖动时元素的位置,鼠标的当前位置减去前面刚计算的值。

好了,上代码:

鼠标拖动

再改进一下,电脑维修技术,上面的鼠标拖动没有限制范畴,有时会拖动窗口外面看不见了。下面就限制下范畴

要点一:如下,如果元素的左边位置小于0时,给它赋值为0,如果大于可视窗巨细减去元素自己的宽度的,给它赋值为 可视窗巨细减元素自己宽度的差值。

var boxl = oevent.clientx - disx;

if(boxl < 0){

boxl =0;

}else if(boxl > vieww - box.offsetwidth){

boxl = vieww - box.offsetwidth;

}

鼠标拖动

但愿本文所述对各人的javascript措施设计有所帮手。

以上是:解决javascript实现简单的鼠标拖动效果实例问题的详细资料教程