JS implementation of the method to drag Div

Source: Internet
Author: User

  This article mainly introduces the implementation of JS can be dragged Div method, a friend in need can refer to the

With the changes in the times, more and more sense of the importance of JS, JS not only can do Web pages (such as ext frame), can also do some web effects, these special effects not only compatible with the PC, but also compatible with the mobile phone, after all, is browser-based, and platform does not matter. Now Microsoft's WINDOWS8 system app can be developed with JS, we have time to try.         now cut to the chase, talk about JS implementation can drag Div. To implement this feature we'll start with the idea:        1. Capture MouseDown event for Mouse Div        2. Capture Document   MouseMove event        3. Cancel event   Then we'll take a look at the code:   Code As follows: function Drag (ID) {            var $ = function (flag) {        &N Bsp       return document.getElementById (flag);                         $ (id). onmousedown = function (e) {& nbsp               var d = document;                 var page = {              &NBS P     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;                                   & nbsp }                              var x = Page.layerx (e);                 var y = page.layery (e);                         if (dv.setcapture) {    &NB Sp               dv.setcapture ();                                 ELSE if (window.captureevents) {                    window.captureevents (Event. MOUSEMOVE | Event.mouseup);                                 d.onmous emove = function (e) {                            & nbsp           var tx = Page.pagex (e)-X;                     var ty = page. Pagey (e)-y;                     Dv.style.left = tx + "px";                     dv.style.top = ty + "px";                                 d.onmous EuP = function () {                    if (dv.releasecapture) {                        dv.releasecapture ();                                   & nbsp     ELSE if (window.releaseevents) {                    &NBSP ;   Window.releaseevents (Event.mousemove | Event.mouseup);                                   & nbsp   &nbsp D.onmousemove = null;                     d.onmouseup = null;                            }        }       code Analysis:   1.    Get div object     Copy code code as follows: var $ = function (flag) {&NB Sp               return document.getElementById (flag);                    2. Capture Document MouseDown events:   has this code:   The code is as follows:      var page = {                    EVENT:FUNCTI On (evt) {                        var ev = EVT | | window.even T                         return EV;                     &NB  Sp                 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;                                   & nbsp }      where event gets mouse events, Pagex,pagey gets the coordinates of the mouse, Layerx,layery gets the distance of the mouse from the div border.   There is a section of code:   Code as follows:              if (dv.setcapture) {      &NBS P             dv.setcapture ();   &NBSp                             else if (window.captur eevents) {                    Window.captureevents (Event.mousemove | Event.mouseup);                 This is to capture Div MouseMove and MouseUp events, do not know TX can be online search. 3. The MouseMove and MouseUp events:  code for document are as follows: D.onmousemove = function (e) {            &NBS P                           var tx = Page.pagex (e)-X;                     var ty = Page.pagey (e)-y;                     Dv.style.left = tx + "px";                     dv.style.top = ty + "px";                 &N         Bsp         d.onmouseup = function () {                  &NB Sp if (dv.releasecapture) {                        DV.RELEASECAP Ture ();                                   & nbsp     ELSE if (window.releaseevents) {                    &NBSP ;   Window.releaseevents (Event.mousemove | Event.mouseup);                                   & nbsp     d.onmousemove = null;                     d.onmouseup = null;                 {  Tx,ty is the most important code, is the   set DIV coordinates some people may ask why to-x,-y?   X,y is actually to get the mouse distance of the div border, if not lost   mouse arrow coordinates and DIV is the same as the x,y coordinates, so drag, the mouse position will be biased to the upper left corner, the effect is, drag will bounce.   Code as follows:                 if (dv.releasecapture) {                        dv.releasecapture ();                                   & nbsp     ELSE if (window.releaseevents) {                    &NBSP ;   Window.releaseevents (Event.mousemove | Event.mouseup);                                   & nbsp     d.onmousemove = null;                     d.onmouseup = null;   The above code is the Onmousemove,onmouseup event that cancels the document after the mouse is loosened.   has recently been learning JS, follow-up has a new experience will be shared with you, hope to learn and progress together.    
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.