JavaScript drag and drop

The drag is divided into three parts:

1.mousedown:

• Gets the current position of the mouse, E.clientx,e.clienty
• Get the position of the dragged object (from the upper left corner), _this.offsetleft,_this.offsettop
• Code:

  1dragdivname.onmousedown=function(e) {2         varE = GetEvent (e);//[Object MouseEvent]3         var_this = This;//[Object Htmldivelement]4         varDIFFX = E.clientx-_this.offsetleft;//gets the left distance of the nearest container from the current point of the mouse5         varDiffy = E.clienty-_this.offsettop;//gets the distance above the nearest container from the current point of the mouse6         //trigger when Mouse is locked (click to live), ie compatibility7         if(typeof_this.setcapture! = ' undefined ') {8 _this.setcapture ();9}

2.mousemove:

• Because the entire page can be slid, the event object should be the document
• Get the position of the mouse after the move
• The position of the mouse position calculated by MouseDown and the upper left corner of the moving object appears where the object should be.
• Determines whether the left and top positions of the object are negative
• Assigning values to moving object locations
• Code

  1Document.onmousemove =function(e) {2             varE =getEvent (e);3             varleft = E.CLIENTX-DIFFX;//gets the distance of the container from the left side of the window4             vartop = E.clienty-diffy;//gets the distance from the container above the window5             //judging the left distance6             if(Left < 0) {7left = 0;8}Else if(Left > Getinner (). Width-_this.offsetwidth) {9left = Getinner (). Width-_this.offsetwidth;Ten  One             } A             //to judge the distance above -             if(Top < 0) { -top = 0; the}Else if(Top > Getinner (). Height-_this.offsetheight) { -top = Getinner (). Height-_this.offsetheight; -             } -             //assigning values to a container location +_this.style.left = left + ' px '; -_this.style.top = top + ' px '; +  A}

3.mouseup:

• Action to release the mouse
• Code:

  1Document.onmouseup =function () {2              This. onmousemove =NULL;3              This. onmouseup =NULL;4             //trigger When Mouse is released (release mouse), IE compatibility5             if(typeof_this.releasecapture! = ' undefined ') {6 _this.releasecapture ();7             }8}

JavaScript drag and drop