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

前端之家收集整理的这篇文章主要介绍了javascript实现简单的鼠标拖动效果实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

要点一:

Box.offsetLeft;

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

要点二:

Box.style.left = oevent.clientX - disx + "px";

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

好了,上代码

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

鼠标拖动

Box">

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

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

Boxl = oevent.clientX - disx; if(Boxl < 0){ boxl =0; }else if(boxl > vieww - Box.offsetWidth){ Boxl = vieww - Box.offsetWidth; } 无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

鼠标拖动

Box">

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

原文链接:https://www.f2er.com/js/54863.html

猜你在找的JavaScript相关文章