JavaScript实现DIV可随意移动，无需设置监听

小咪咪 2021-09-30 05:36 315阅读 0赞

## JavaScript实现DIV可随意移动，无需设置监听 ##

每次使用时候，给drag函数传递一个DIV的id号，该DIV即可被鼠标移动

drag:function(id) {
                var $ = function (flag) {
                    return document.getElementById(flag);
                }
                $(id).onmousedown = function (e) {
                    var d = document;
                    var  that=this;
                    var page = {
                        event: function (evt) {
                            var ev = evt || window.event;
                            return ev;
                        },
                        pageX: function (evt) {
                            var e = this.event(evt);
                            return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
                        },
                        pageY: function (evt) {
                            var e = this.event(evt);
                            return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
    
                        },
                        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;
                        }
                    }            
                    var x = page.layerX(e);
                    var y = page.layerY(e);       
                    if (that.setCapture) {
                        that.setCapture();
                    }
                    else if (window.captureEvents) {
                        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
                    d.onmousemove = function (e) {                   
                        var tx = page.pageX(e) - x;
                        var ty = page.pageY(e) - y;
                        that.style.left = tx + "px";
                        that.style.top = ty + "px";
                    }
                    d.onmouseup = function () {
                        if (that.releaseCapture) {
                            that.releaseCapture();
                        }
                        else if (window.releaseEvents) {
                            window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                        }
                        d.onmousemove = null;
                        d.onmouseup = null;
                    }
                }
            }