js实现可拖动DIV的方法(3)

},
                    layerX: function (evt) {
                        var e = this.event(evt);
                        return e.layerX || e.offsetX;
                    },
                    layerY: function (evt) {
                        var e = this.event(evt);
                        return e.layerY || e.offsetY;
                    }
                }

其中event获取鼠标事件，pageX，pageY获取鼠标的坐标，layerX，layerY获取鼠标距离div边框的距离。

还有一段代码：

复制代码 代码如下:

             if (dv.setCapture) {
                    dv.setCapture();
                }
                else if (window.captureEvents) {
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                }

这个就是捕捉div的MouseMove和MouseUp事件，不懂得tx可以到网上查查。
3. document的MouseMove和mouseUp事件：

复制代码 代码如下:

d.onmousemove = function (e) {                   
                    var tx = page.pageX(e) - x;
                    var ty = page.pageY(e) - y;
                    dv.style.left = tx + "px";
                    dv.style.top = ty + "px";
                }  
                d.onmouseup = function () {
                    if (dv.releaseCapture) {
                        dv.releaseCapture();
                    }
                    else if (window.releaseEvents) {
                        window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
                    d.onmousemove = null;
                    d.onmouseup = null;
                }

其中的tx,ty就是最重要的代码了，是设置div坐标的

有的人可能会问为什么要-x,-y?

x,y其实就是获取鼠标距离div边框的距离，如果不减掉的话

鼠标箭头的坐标和div的x,y坐标一样了，这样拖动之后，鼠标的位置会偏到左上角，效果就是，拖动之后会弹动一下。

复制代码 代码如下: