js method to implement draggable DIV_javascript skills-JS Tutorial-php.cn

js method to implement draggable DIV_javascript skills

WBOY

Release： 2016-05-16 17:08:49

Original

1305 people have browsed it

With the changes of the times, the importance of js is increasingly felt. js can not only make web pages (such as Ext framework), but also can make some web special effects. These special effects are not only compatible with PCs, but also compatible with mobile phones. After all, it is browser-based and has nothing to do with the platform. Now Microsoft's windows8 system apps can be developed using js. If you have time, you can try it.

Now let’s get to the point and talk about js implementation of draggable Div. To implement this function, let’s first talk about the idea:

1. Capture the mousedown event of the mouse div

2. Capture document’s mousemove event

3. Cancel event

Then let’s take a look at the code:

Copy code The code is as follows:

                    },
                    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:

Get the div object

Copy the code The code is as follows:

var $ = function (flag ) {
                                                                                                   .

There is such a piece of code in it: 

Copy the code

The code is as follows: var page = { event: function (evt) { var ev = evt || window.event;

return ev;

                                                                                                                                                                        = this.event(evt);
                                                                                                                          pageY: function (evt) {
                                                                                                                           var e = this.event(evt);
                                                                                                                                                                       Return e.layerX || e.offsetX;
) >               }

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

There is also a piece of code:

Copy the code

The code is as follows:

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

This is to capture the MouseMove and MouseUp events of div. If you don’t know tx, you can check it online.
3. MouseMove and mouseUp events of document:

Copy code The code is as follows:

 d.onmousemove = function (e) {                                                                                                                                    " px";
 dv.style.top = ty "px";
 } 
 d.onmouseup = function () {
 If (dv.releaseCapture) {
 dv.releaseCapture() ;
                                                                                                                                                                                                 ;                                                                                                                                                                                                                                                                     ​onmouseup = null;
 }


The tx and ty are the most important codes, which are used to set the div coordinates


Some people may ask why -x,-y?


x, y actually get the distance between the mouse and the div border, if not subtracted 


The coordinates of the mouse arrow are the same as the x, y coordinates of the div. After dragging, the mouse position will move to the upper left corner. The effect is that it will bounce after dragging. 

Copy code

The code is as follows:

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

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

I have been learning js recently, and I will share my new experiences with you in the future. I hope to learn and make progress together with everyone.