关于js拖拽早已是老生常谈，网上一搜一大坨，但是有很多并不是很完善，或者兼容性不够，或者功能不全，并且这样的东西还是自己写的好用。我打算在（一）中主要对js拖拽功能的注意点进行罗列，力求简单；在（二）中利用（一）的拖拽去实现类似google个性化首页的拖拽模块功能。
首先贴上完整code（IE/FF）
对Drag的使用：在window.onload中，必填参数是titleBar和dragDiv，后者是要拖拽的容器，前者是拖拽容器的可拖拽部位，譬如经常遇到的通过标题栏拖动整个DIV，则titleBar即为改标题栏。而{ opacity: 100, keepOrigin: true , area: { left: 50, right: 500, top: 100, bottom: 400}} 是可选参数，用于扩展功能，opacity设置透明度，keepOrigin设置拖拽过程中是否保留原来拖拽容器，area设置拖拽范围。
- 拖拽的基本原理：当mousedown时记下鼠标点击位置离拖拽容器左边沿的距离和上边沿的距离，即tmpX,tmpY；mousemove时通过定位拖拽容器的style.left/style.top，使拖拽容器进行移动，定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在位置计算得出；mouseup时，结束移动。
- “var dragObj = this;” 这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown里的this是titleBar,mouseup/mousemove里的this是document.
- 当拖拽速度太快导致鼠标移出拖拽容器，而拖拽容器位置未变，用document.mousemove代替titleBar.mousemove即可。
- 设置拖拽容器可拖拽的范围，若未设置，则默认为当前窗口可视范围。Note：在设置范围的时候使用Math.max/min来处理，而不是用If语句判断，用后者的话会导致快速拖拽时未达到容许范围边沿即停止的状况。
- 当拖拽过程中，可设置是否保留原来拖拽容器，当拖拽结束，隐藏原来容器，默认不保留。
- 当拖拽时，可设置拖拽的容器是否透明及透明度多少，默认不透明。但若拖拽过程中设置保留原来拖拽容器，即keepOrigin: true，则设置透明度为50%。
- 使右键、鼠标中键等不能拖动，仅左键单击可以拖动。Note：IE鼠标左键为event.Button=1 FireFox为event.Button=0.
- 解决如果点击在图片上无法拖拽的问题：非常杯具的是IE通过ev.returnValue = false来防止图片的事件，注意是放在document.onmousemove中，而FireFox通过ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。
- 有一种情况，当浏览器窗口不是最大化的时候，你希望当鼠标在浏览器外移动时，浏览器里的拖拽容器仍然移动，这时就要使用鼠标事件捕获，IE中相应的是dragDiv.setCapture();与dragDiv.releaseCapture(); FF中是window.captureEvents(Event.mousemove);与window.releaseEvents(dragDiv.mousemove) 。
- 确保每次拖拽时拖拽容器的zindex都不会被其他块元素覆盖。
首先这篇文章是基于 （一） code基础上的，进行改动实现的仿iGoogle自定义首页模块拖拽功能。将code贴上，你也可在下方进行下载。code未免枯燥，我将尽量用文字描述思路及注意点，所以即便你不看code也能根据文字翻译成你的code。
1. 准备
1.1 由于模块拖拽中使用虚线框，所以去除（一）中拖拽的保持原有DIV的功能（即keepOrigin）；
1.2 在新建Drag对象时如未设置拖拽时透明值，默认改为60%的透明度；
1.3 将拖拽范围上下左右默认设置为9999，因为模块拖拽超过当前可视窗口是必要的。
1.4 在（一）中有个BUG，即用IE第一次打开页面报缺少对象的错，如要重现，右键文件选择IE打开，刷新后或者将文件拖到已有IE浏览器中无法重现。原因Common.getViewportSize中有document.body.offsetWidth，IE中第一次打开，当解析到这句时，document.body不存在，所以取offsetWidth时错误。所以要么把这段放到body标签中，要么进行对document.body的判断。
1.5 HTML结构：这里使用的是Table，在TD中存放要拖拽的DIV。当然也可以全部用DIV布局。但是拖拽的DIV的postion要设为relative，因为他是在文档流中的，absolute则是脱离文档流。
2. 思路及注意点
2.1 在mouseDown时，插入虚线框DIV，这里要注意设置虚线框的position为relative，插入到当前拖拽DIV所处列的文档流中，同时把当前拖拽DIV的position改为absolute，使脱离文档流来进行拖拽。虚线框DIV的宽度要注意减去2倍的boderWidth，否则虚线框将撑大当前列，造成文档布局移位。同时，保证插入虚线框DIV的code要在赋当前拖拽DIV的ZIndex值前面，以保证当前拖拽DIV的ZIndex最大。
2.2 在mouseUp时，插入当前拖拽DIV至虚线框前，将当前拖拽DIV的position、left、top、width清空，进入文档流。然后删除虚线框。
2.3 模块自定义拖拽的核心操作即在mouseMove时。
2.3.1 首先是虚线框的高度宽度处理，我的处理是高度保持不变，宽度取所移动到当前列的宽度。
2.3.2 然后核心问题是：什么时候让虚线框移动到什么位置。
我的处理是：拿当前拖拽中的鼠标位置与页面可拖拽的各DIV的绝对位置进行比较。所以在mouseDown时还要记住当前页面可拖拽DIV的绝对位置和宽度高度（RegDragsPos方法中），存入数组。
当拖拽中鼠标进入某DIV区域内，如在该DIV上半部，则虚线框插到该DIV的上方，如在下半部则插在下方。
当拖拽中鼠标并未触及某具体DIV区域内，在外部游离时，则首先判断处于那一列范围内，然后如果该列没有可拖拽DIV，则虚线框直接插入该列；若该列有DIV，则判断鼠标位置处于该列第一个DIV上方，则往上插，处于该列最下面DIV下方，则往下插。至此所有可能情况均处理。
有一特殊情况，譬如，当前拖拽DIV在最上方游离，鼠标不碰及任何DIV，从第一列开始，移动到第二第三列虚线框插入均正常，但是回到第一列时发现无法插入。因为此时当前拖拽的DIV仍然作为第一列的第一个DIV，在判断是否位于该列第一个DIV上方时不符合条件无法执行虚线框插入的操作。所以在mouseDown时临时记下该列第一个DIV的top和最后一个DIV 下沿绝对位置，以此比较。
对于什么时候让虚线框移动到什么位置，IGoogle以前版本的处理是：找到取距离当前鼠标位置这点最近的可拖拽DIV（取最短的两点间距离），然后让虚线框插入该DIV处。现在版本不清楚怎么做的。
3.拖拽之后保存当前模块布局，使刷新页面仍保持自定义的模块布局。
其实是在window.onunload中用cookie记下当前布局状态，如: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']] 。window.onload中去布局。实际应用中可以将此插入后台数据库进行保存。
【转：http://www.cnblogs.com/Leo_wl/archive/2010/06/25/1765012.html】
2104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
