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

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

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

当鼠标按下的时候，记录鼠标当前位置和元素左边距离的差值。
当鼠标移动的时候，给元素的位置赋值，就是鼠标的位置，减去刚才的差值。
当鼠标放开的时候，给鼠标移动和鼠标放开赋值null，让它们不要再有任何动作。

要点一：

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

要点二：

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

好了，上代码：

再改进一下，上面的鼠标拖动没有范围，有时会拖动窗口外面看不见了。下面就下范围

要点一：如下，如果元素的左边位置小于0时，给它赋值为0，如果大于可视窗大小减去元素本身的宽度的，给它赋值为 可视窗大小减元素本身宽度的差值。

var boxl = oevent.clientX - disx;
if(boxl < 0){
 boxl =0;
 }else if(boxl > vieww - box.offsetWidth){
 boxl = vieww - box.offsetWidth;
 }

希望本文所述对大家的javascript程序设计有所帮助。