Using JavaScript to implement drag-and-drop change element size _javascript Tips

General Introduction

Drag-and-drop changing element size adds some functionality to the simulation drag

Drag and drop change element size principle

First of all, the box needs to know that we want to change the size of it, so I set a range for it, and when we click on that range, we want to change its size.

When we click on these red areas of the square, we know we want to change its size.

Code implementation:

Get event object, compatibility spelling
      var ev = EV | | event;
      The position of the mouse when pressed
      var mousedownx = ev.clientx;
      var mousedowny = Ev.clienty;
      Box up and down about four sides of the position and the square of the long width of
      var T0 = this.offsettop;
      var B0 = this.offsettop + this.offsetheight;
      var L0 = this.offsetleft;
      var R0 = this.offsetleft + this.offsetwidth;
      var W = this.offsetwidth;
      var H = this.offsetheight;
      Set the recognition range of the box
      var areat = T0 +;
      var areab = b0-10;
      var areal = L0 +;
      var arear = r0-10;

Where Areat, Areab, areal, arear are red areas.

The next box knows that we want to change the size of it, but how to change the size of the direction. So to judge the direction of the change in size

Code implementation:

Determine the direction of changing the size of the squares
      //left
      var Changel = Mousedownx < areal;
      Right
      var changer = mousedownx > arear;
      On
      var changet = Mousedowny < areat;
      Under
      var changeb = mousedowny > Areab;

And then there's the most important change in style.

Code implementation:

Change in size according to the direction of changing the size of the square
        //left
        if (Changel) {
          oDiv.style.width = (Mousedownx-mousemovex) + W + ' px ';
          ODiv.style.left = L0-(Mousedownx-mousemovex) + ' px ';
        }
        Right
        if (changer) {
          oDiv.style.width = (mousemovex-mousedownx) + W + ' px ';
        }
        On
        if (changet) {
          oDiv.style.height = (Mousedowny-mousemovey) + H + ' px ';
          ODiv.style.top = T0-(Mousedowny-mousemovey) + ' px ';
        }
        Under
        if (CHANGEB) {
          oDiv.style.height = (mousemovey-mousedowny) + H + ' px ';
        }

Note: When changing the left and the upper side to modify the position of the box at the same time, or you will drag the left side and the right side of the expansion of the position (drag the upper side of the lower side of the position larger)

Code optimization

Pre-optimized code:

var odiv = document.getElementById (' Div1 ');
      Odiv.onmousedown = function (EV) {//Get event object, compatibility notation var ev = EV | | event;
      The position of the mouse when pressed var mousedownx = Ev.clientx;
      var mousedowny = Ev.clienty;
      Box up and down about four sides of the position and the square of the long width of var T0 = This.offsettop;
      var B0 = this.offsettop + this.offsetheight;
      var L0 = This.offsetleft;
      var R0 = this.offsetleft + this.offsetwidth;
      var W = this.offsetwidth;
      var H = this.offsetheight;
      Set the recognition range of the box var areat = T0 + 10;
      var areab = b0-10;
      var areal = L0 + 10;
      var arear = r0-10;
      Determine the direction of changing the size of the squares//left var Changel = Mousedownx < areal;
      Right var changer = mousedownx > arear;
      on var changet = Mousedowny < areat;
      Under var Changeb = mousedowny > Areab;
        Odiv.onmousemove = function (EV) {var ev = EV | | | event;
        Mouse move when the mouse position var mousemovex = Ev.clientx; var Mousemovey = EV.clienty; Change the size of the square according to the direction of the change//left if (Changel) {oDiv.style.width = (Mousedownx-mousemovex) + W + ' px '
          ;
        ODiv.style.left = L0-(Mousedownx-mousemovex) + ' px ';
        }//Right if (changer) {oDiv.style.width = (MOUSEMOVEX-MOUSEDOWNX) + W + ' px ';
          }//Up if (changet) {oDiv.style.height = (Mousedowny-mousemovey) + H + ' px ';
        ODiv.style.top = T0-(Mousedowny-mousemovey) + ' px ';
        }//Next if (CHANGEB) {oDiv.style.height = (mousemovey-mousedowny) + H + ' px ';
        //Limited scope if (parseint (ODiv.style.width) <) {ODiv.style.width = + ' px ';
        } if (parseint (ODiv.style.height) <) {ODiv.style.height = + ' px ';
      } odiv.onmouseup = function () {odiv.onmousemove = null; }
    }

This code now has two main problems:

1, when the mouse moved too fast out of the box, you can not continue to change the size of the element

　 Solution: Bind the OnMouseMove event and the OnMouseUp event to the Document object

2, when there is text in the box, drag and drop to change the size of the box will trigger the browser default native drag and drop behavior

　 Solution: 1. Block browser default behavior (except IE8 browser)

Add statement return False in OnMouseDown

　　　　　　2. Set global Capture (IE8)

Set global capture in onmousedown

To suppress global capture in onmouseup

Optimized code:

<div id= "Div1" >adfadsf</div> <script type= "Text/javascript" > var odiv = document.getElementById ('
    Div1 ');
      Odiv.onmousedown = function (EV) {//Get event object, compatibility notation var ev = EV | | event;
      The position of the mouse when pressed var mousedownx = Ev.clientx;
      var mousedowny = Ev.clienty;
      Box up and down about four sides of the position and the square of the long width of var T0 = This.offsettop;
      var B0 = this.offsettop + this.offsetheight;
      var L0 = This.offsetleft;
      var R0 = this.offsetleft + this.offsetwidth;
      var W = this.offsetwidth;
      var H = this.offsetheight;
      Set the recognition range of the box var areat = T0 + 10;
      var areab = b0-10;
      var areal = L0 + 10;
      var arear = r0-10;
      Determine the direction of changing the size of the squares//left var Changel = Mousedownx < areal;
      Right var changer = mousedownx > arear;
      on var changet = Mousedowny < areat;
      Under var Changeb = mousedowny > Areab; IE8 Cancel default behavior-set global capture if (odiv.setcapture) {odiv.seTcapture ();
        } document.onmousemove = function (EV) {var ev = EV | | | event;
        Mouse move when the mouse position var mousemovex = Ev.clientx;
        var mousemovey = Ev.clienty; Change the size of the square according to the direction of the change//left if (Changel) {oDiv.style.width = (Mousedownx-mousemovex) + W + ' px '
          ;
        ODiv.style.left = L0-(Mousedownx-mousemovex) + ' px ';
        }//Right if (changer) {oDiv.style.width = (MOUSEMOVEX-MOUSEDOWNX) + W + ' px ';
          }//Up if (changet) {oDiv.style.height = (Mousedowny-mousemovey) + H + ' px ';
        ODiv.style.top = T0-(Mousedowny-mousemovey) + ' px ';
        }//Next if (CHANGEB) {oDiv.style.height = (mousemovey-mousedowny) + H + ' px ';
        //Limited scope if (parseint (ODiv.style.width) <) {ODiv.style.width = + ' px '; } if (parseint (ODiv.style.height) <) {ODiv.style.height = + ' px ';
        } document.onmouseup = function () {document.onmousemove = null;
        Releases the global Capture if (odiv.releasecapture) {odiv.releasecapture ();
    return false; }

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!