Js implementation can drag DIV methods

  • 2020-03-30 00:58:44
  • OfStack

With the change of The Times, more and more feel the importance of js, js not only can do web pages (such as Ext framework), but also can do some web effects, these effects are not only compatible with PC, but also compatible with mobile phone, after all, it is browser-based, and platform has nothing to do with. Now Microsoft's windows8 system App can be developed with js, you have time to try.

        Now to get down to business, say that js implementation can drag Div.

        1. Capture the mousedown event of the mouse div

        2. Capture the document;   Mousemove event

        3. Cancel events

Then let's look at the code:


function Drag(id) {
            var $ = function (flag) {
                return document.getElementById(flag);
            }
            $(id).onmousedown = function (e) {
                var d = document;
                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 (dv.setCapture) {
                    dv.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;
                    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;
                }
            }
        }

Code analysis:

1.

Get the div object


var $ = function (flag) {
                return document.getElementById(flag);
            }     

2. Mousedown event that captures the document:

Here's a piece of code:


     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;
                    }
                } 

Where, event gets the mouse event, pageX, pageY gets the coordinates of the mouse, layerX, layerY gets the distance between the mouse and the div border.

Here's another piece of code:


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

This is to capture div MouseMove and MouseUp events, do not know tx can go to the Internet.
3. MouseMove and mouseUp events of document:

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 is the most important code, is to set the div coordinates

Some of you might say why do we have minus x, minus y?

X,y is just getting the distance between the mouse and the div border, if you don't subtract it

The coordinates of the mouse arrow are going to be the same as the x and y coordinates of div, and then when you drag it around, it's going to be in the upper left corner, and then it's going to bounce around a little bit.


                if (dv.releaseCapture) {
                        dv.releaseCapture();
                    }
                    else if (window.releaseEvents) {
                        window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
                    d.onmousemove = null;
                    d.onmouseup = null;

The above code is to cancel the onmousemove, onmouseup event of the document after the mouse is released.


Related articles: