先看看要拖动的图层(模拟窗口)的渲染。

要达到的拖动效果：按下窗口上方标题栏上的鼠标左键，同时移动鼠标，窗口也会随之移动。窗口：复制代码如下： div id=' win ' div id=' win _ header '/div/div。一点准备：要让窗户自由移动，窗户的位置要绝对。在窗口中增加一个标题栏，这是通过使用放置在窗口顶部的图层来实现的，同时将标题栏的鼠标光标设置为移动形状(在chrome中拖动时，光标会变成文本光标，松开鼠标按钮后会恢复)。复制的代码如下： # win { position : absolute；宽度width:480px高度：320 px；背景-color : # d4d 4d 4；border: 1px固体# 4d4d4d} # win _ header { width:480px高度：48 px；背景-color : # 4d 4d 4d；cursor:move}定义一个工具函数获取指定ID属性的元素：复制代码如下： function $ ID(ID){ return document . getelementbyid(ID)；}定义浏览器核心标识符isie:varie=(window . navigator . user agent . indexof(' ie ')==-1)？假：真；获取窗口元素及其标题栏：复制代码如下： var win=$ id(' win ')；var header=$ id(' win _ header ')；为了方便记录鼠标和窗口的位置信息，创建一个位置：复制代码如下：VAR POS=function (x，y) {this。x=xthis.y=y};设置窗口的初始位置(css的左值和顶值)。我不知道为什么会在这里。如果不使用js设置这两个属性，就不会得到值，也不能在CSS中指定。复制代码如下：VAR原始POS=新POS (20，20)；在拖动窗口的过程中，需要记录的值如下：鼠标按下时鼠标光标位置的复制码如下： var oldmouse=new pos(0，0)；按下鼠标时窗口的位置为var oldpos=new pos(0，0)；鼠标移动时窗口的新位置var newpos=new pos(0，0)；设置窗口的初始位置，复制代码如下： win . style . left=original pos . x ' px '；win . style . top=original pos . y ' px '；此外，由于浏览器(IE和非IE)的不同，元素绑定事件处理程序的方法也不同(IE使用attachEvent，而非IE使用addEventListener)。为了简化事件绑定的操作，定义了一个事件绑定函数：复制代码如下：function bind (ev，func) {if (isie) {header。attachevent ('on' ev，func)。} else { header . addeventlistener(ev，func，false)；}}完成所有这些工作后，就可以开始处理鼠标事件了。在这个程序中，我只想要鼠标左键拖动窗口，但是没有其他键可以使用，所以需要判断鼠标左键是否被按下。这个判断会用到几个函数中，所以提取成一个函数，通过传入的参数(鼠标键值，也就是按了哪个键)来判断。这里需要注意浏览器之间的区别：IE中鼠标左键的值为1，非IE中的值为0。复制代码如下：函数isleft button(BTN){ if(ISIE){ if(BTN==1)返回true否则返回false} else { if(btn==0)返回true否则返回false}}拖动通过按下鼠标左键并移动来完成。这个动作是共享的，即鼠标首先触发按压动作(mousedown)，然后触发移动动作(mousemove)。要判断鼠标是真的拖动还是刚好经过窗口，设置一个变量记录鼠标按下的状态：var mousedown=false由于CSS中的兼容性问题，当鼠标悬停在窗口的标题栏上时，使用js来控制颜色的变化。

浮动复制代码如下：函数over(e){ header . style . background color=' # 5d 5d 5d '；}保留复制代码如下： function out(e){ header . style . background color=' # 4d 4d 4d d '；//有时鼠标会离开窗口而不释放。//此时，通过触发鼠标的释放事件，窗口将与鼠标的控件分离。}按下在按下事件中，需要判断鼠标左键是否被按下；此时只记录鼠标和窗口的位置，否则不记录。复制的代码如下：函数down(e){ e=e | | event；if(！isLeftButton(e.button))返回；mousedown=trueold mouse . x=e . client x；old mouse . y=e . clienty；old pos . x=ParSeint(win . style . left . replace(' px '，' '))；old pos . y=ParSeint(win . style . top . replace(' px '，' '))；}松开复制代码如下：功能向上(e) {if(！isLeftButton(e.button))返回；mousedown=false}这里的移动涉及两个鼠标事件：按下和移动。并且当按下鼠标左键时，移动动作有效。窗口的新位置由鼠标在拖动状态下的移动距离(x和y之间的距离)决定。也就是把新的鼠标位置发送到按下左键得到一个距离时记录的位置，然后把鼠标移动距离加到窗口位置就得到窗口的新位置。复制代码如下：函数move(e) {if(！isLeftButton(e.button))返回；if(mouse down){ e=e | | event；new pos . x=e . client x-old mouse . x；new pos . y=e . clienty-old mouse . y win . style . left=(old pos . x new pos . x)' px '；win . style . top=(old pos . y new pos . y)' px '；}}事件处理已经写好。最后，让我们绑定元素。阿门！复制代码如下： bind('mouseover '，over)；bind('mouseenter '，over)；bind('mouseout '，out)；bind('mouseleave '，out)；绑定(‘模糊’，out)；bind('mousedown '，down)；bind('mouseup '，up)；bind('mousemove '，move)；但是FF里拖的有问题，只能第一次正常拖，后面有点乱！