要确定拖动的时候鼠标点在元素的位置,要让窗口能自由移动

同时将标题栏的鼠标光标设置为拖动形状(在chrome中拖动的时候,就是鼠标位置减去元素的左边距离

先看看要拖动的层的效果图吧。

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

要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动。窗口:
复制代码 代码如下:

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

一点准备工作: 要让窗口能自由移动,那么窗口的定位应该采用绝对定位;
给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标题栏的鼠标光标设置为拖动形状(在chrome中拖动的时候,光标会变成文字光标,松开鼠标键后恢复)。
复制代码 代码如下: #win {
position:absolute; width:480px; height:320px; background-color:#d4d4d4;
border: 1px solid #4d4d4d; } #win_header { width:480px; height:48px;
background-color:#4d4d4d; cursor:move; }
定义一个工具函数,用来获取指定ID属性的元素: 复制代码 代码如下: function $id { return
document.getElementById; } 定义一个浏览器核心标识isIE: var isIE =
(window.navigator.userAgent.indexOf ? false : true;
获取到窗口元素及其标题栏: 复制代码
代码如下: var win = $id; var header = $id;
为了方便记录鼠标和窗口的位置信息,创建一个位置: 复制代码 代码如下: var pos =function { this.x =
x; this.y = y; }; 给窗口设置一个初始位置。
这里不知道是为什么,如果不使用js设置这两个属性,就取不到值,在CSS中指定了也不行。
复制代码 代码如下: var originalpos = new
pos; 在拖动窗口的过程中,需要记录的值有: 鼠标按下时鼠标光标的位置 复制代码 代码如下: var oldmouse =new pos;
鼠标按下时窗口的位置 var oldpos = new pos; 鼠标移动时窗口的新的位置 var
newpos = new pos; 设置窗口的初始位置 复制代码 代码如下: win.style.left =
originalpos.x + “px”; win.style.top = originalpos.y + “px”;
又是因为浏览器的差异,元素绑定事件处理函数的方法不同(IE使用attachEvent,非IE使用addEventListener),为了简化事件绑定的操作,定义一个事件绑定函数:
复制代码 代码如下: function bind {
header.attachEvent; } else { header.addEventListener; } }
在做好这些工作后,就可以开始处理鼠标事件了。
在这个程序中,只希望鼠标左键拖动窗口,其它键都不能,所以需要判断是否是鼠标左键按下。而这个判断会在几个函数中都使用到,所以提取出来到一个函数中,通过传入的参数判断。在这里,需要注意浏览器间的差异:IE中鼠标左键的值是1,而非IE中值是0.
复制代码 代码如下: function isLeftButton
{ if return true; else return false; } else { if return true; else
return false; } }
拖动动作是在按下鼠标左键后移动来完成的。把这个动作分享开来,即是鼠标先触发了按下动作,然后触发了移动动作。为了判断是否是真的在拖动还是只是鼠标从窗口上经过,设置一个变量来记录鼠标按下的状态:
var mousedown = false;
由于CSS中存在的兼容性问题,这里使用js来控制鼠标悬停在窗口标题栏上面的时候的颜色变化。
悬浮 复制代码 代码如下: function over{
header.style.backgroundColor = “#5d5d5d”; } 离开 复制代码 代码如下: function out {
header.style.backgroundColor = “#4d4d4d”; //
有时候鼠标会在未松开的情况下离开窗口, //
此时通过触发鼠标的松开事件来使窗口脱离鼠标的控制 up; } 按下
在按下事件中,需要先判断是否按下的是鼠标的左键;
若是才记录鼠标和窗口此时的位置,否则不记录。 复制代码 代码如下: function down { e = e ||
event; if(!isLeftButton return; mousedown = true; oldmouse.x =
e.clientX; oldmouse.y = e.clientY; oldpos.x =
parseInt(win.style.left.replace; oldpos.y =
parseInt(win.style.top.replace; } 松开 复制代码 代码如下: function up {
if(!isLeftButton return; mousedown = false; } 移动
这里就涉及到鼠标的两个事件:
按下和移动。当且仅当鼠标左键按下时,移动动作才有效。
窗口的新位置,是由鼠标在拖动状态下的移动距离决定的。即:
新的鼠标位置送去按下左键时记录下的位置,得到一个距离,然后将窗口的位置加上鼠标移动的距离得到窗口的新位置。
复制代码 代码如下: function move {
if(!isLeftButton return; if { e =e || event; newpos.x = e.clientX –
oldmouse.x; newpos.y = e.clientY – oldmouse.y win.style.left = + “px”;
win.style.top = + “px”; } }
事件处理都写好了,最后来给元素绑定上吧,阿门! 复制代码 代码如下: bind; bind; bind; bind;
bind; bind; bind; bind;
不过在FF中的拖动有问题,只能第一次正常拖动,后面就有点乱了!

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

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

disx = oevent.clientX - box.offsetLeft;

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

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