How to make HTML element resizable using pure Javascript

Question

I was wondering how we can make a HTML element like  lt div gt  or  lt p gt  tag element resizable when clicked using pure JavaScript  not the jQuery library or any other library

User · Answer

I have created a function that recieve an id of an html element and adds a border to it's right side the function is general and just recieves an id so you can copy it as it is and it will work

_x000D_

var myoffset;_x000D_
function resizeE(elem){_x000D_
    var borderDiv = document.createElement("div");_x000D_
    borderDiv.className = "border";_x000D_
    borderDiv.addEventListener("mousedown",myresize = function myrsize(e) {_x000D_
     myoffset = e.clientX - (document.getElementById(elem).offsetLeft + parseInt(window.getComputedStyle(document.getElementById(elem)).getPropertyValue("width")));_x000D_
     window.addEventListener("mouseup",mouseUp);_x000D_
     document.addEventListener("mousemove",mouseMove = function mousMove(e) {_x000D_
      document.getElementById(elem).style.width = `${e.clientX -  myoffset - document.getElementById(elem).offsetLeft}px`;_x000D_
  });_x000D_
 });_x000D_
    document.getElementById(elem).appendChild(borderDiv);_x000D_
}_x000D_
_x000D_
function mouseUp() {_x000D_
    document.removeEventListener("mousemove", mouseMove);_x000D_
    window.removeEventListener("mouseup",mouseUp);_x000D_
}_x000D_
_x000D_
function load() _x000D_
{_x000D_
 resizeE("resizeableDiv");_x000D_
 resizeE("anotherresizeableDiv");_x000D_
  resizeE("anotherresizeableDiv1");_x000D_
}

_x000D_

.border {_x000D_
_x000D_
  position: absolute;_x000D_
  cursor: e-resize;_x000D_
  width: 9px;_x000D_
  right: -5px;_x000D_
  top: 0;_x000D_
  height: 100%;_x000D_
}_x000D_
_x000D_
#resizeableDiv {_x000D_
  width: 30vw;_x000D_
  height: 30vh;_x000D_
  background-color: #84f4c6;_x000D_
  position: relative;_x000D_
}_x000D_
#anotherresizeableDiv {_x000D_
  width: 30vw;_x000D_
  height: 30vh;_x000D_
  background-color: #9394f4;_x000D_
  position: relative;_x000D_
}_x000D_
#anotherresizeableDiv1 {_x000D_
  width: 30vw;_x000D_
  height: 30vh;_x000D_
  background-color: #43f4f4;_x000D_
  position: relative;_x000D_
}_x000D_
#anotherresizeableDiv1 .border{_x000D_
  background-color: black;_x000D_
}_x000D_
#anotherresizeableDiv .border{_x000D_
  width: 30px;_x000D_
  right: -200px;_x000D_
  background-color: green;_x000D_
}

_x000D_

<body onload="load()">_x000D_
_x000D_
  <div id="resizeableDiv">change my size with the east border</div>_x000D_
  <div id="anotherresizeableDiv1">with visible border</div>_x000D_
</body>_x000D_
  <div id="anotherresizeableDiv">with editted outside border</div>_x000D_
</body>

_x000D_

resizeE("resizeableDiv"); //this calls a function that does the magic to the id inserted

User · Answer

I just created a CodePen that shows how this can be done pretty easily using ES6   http   codepen io travist pen GWRBQV  Basically  here is the class that does this   let getPropertyValue   function style  prop      let value   style getPropertyValue prop     value   value   value replace    0-9   g         0     return parseFloat value      let getElementRect   function element      let style   window getComputedStyle element  null     return       x  getPropertyValue style   left        y  getPropertyValue style   top        width  getPropertyValue style   width        height  getPropertyValue style   height          class Resizer       constructor wrapper  element  options            this wrapper   wrapper          this element   element          this options   options          this offsetX   0          this offsetY   0          this handle   document createElement  div            this handle setAttribute  class    drag-resize-handlers            this handle setAttribute  data-direction    br            this wrapper appendChild this handle           this wrapper style top   this element style top          this wrapper style left   this element style left          this wrapper style width   this element style width          this wrapper style height   this element style height          this element style position    relative           this element style top   0          this element style left   0          this onResize   this resizeHandler bind this           this onStop   this stopResize bind this           this handle addEventListener  mousedown   this initResize bind this               initResize event            this stopResize event  true           this handle addEventListener  mousemove   this onResize           this handle addEventListener  mouseup   this onStop              resizeHandler event            this offsetX   event clientX -  this wrapper offsetLeft   this handle offsetLeft           this offsetY   event clientY -  this wrapper offsetTop   this handle offsetTop           let wrapperRect   getElementRect this wrapper           let elementRect   getElementRect this element           this wrapper style width    wrapperRect width   this offsetX     px           this wrapper style height    wrapperRect height   this offsetY     px           this element style width    elementRect width   this offsetX     px           this element style height    elementRect height   this offsetY     px              stopResize event  nocb            this handle removeEventListener  mousemove   this onResize            this handle removeEventListener  mouseup   this onStop            class Dragger       constructor wrapper  element  options            this wrapper   wrapper          this options   options          this element   element          this element draggable   true          this element setAttribute  draggable   true           this element addEventListener  dragstart   this dragStart bind this               dragStart event            let wrapperRect   getElementRect this wrapper           var x   wrapperRect x - parseFloat event clientX           var y   wrapperRect y - parseFloat event clientY           event dataTransfer setData  text plain   this element id         x         y              dragStop event  prevX  prevY            var posX   parseFloat event clientX    prevX          var posY   parseFloat event clientY    prevY          this wrapper style left   posX    px           this wrapper style top   posY    px            class DragResize       constructor element  options            options   options                this wrapper   document createElement  div            this wrapper setAttribute  class    tooltip drag-resize            if  element parentNode              element parentNode insertBefore this wrapper  element                     this wrapper appendChild element           element resizer   new Resizer this wrapper  element  options           element dragger   new Dragger this wrapper  element  options            document body addEventListener  dragover   function  event        event preventDefault        return false       document body addEventListener  drop   function  event        event preventDefault        var dropData   event dataTransfer getData  text plain   split           var element   document getElementById dropData 0        element dragger dragStop event  parseFloat dropData 1    parseFloat dropData 2         return false

User · Answer

Is simple   Example https   jsfiddle net RainStudios mw786v1w   var element   document getElementById  element      create box in bottom-left var resizer   document createElement  div    resizer style width    10px   resizer style height    10px   resizer style background    red   resizer style position    absolute   resizer style right   0  resizer style bottom   0  resizer style cursor    se-resize     Append Child to Element element appendChild resizer     box function onmousemove resizer addEventListener  mousedown   initResize  false      Window funtion mousemove  amp  mouseup function initResize e       window addEventListener  mousemove   Resize  false      window addEventListener  mouseup   stopResize  false       resize the element function Resize e       element style width    e clientX - element offsetLeft     px      element style height    e clientY - element offsetTop     px       on mouseup remove windows functions mousemove  amp  mouseup function stopResize e        window removeEventListener  mousemove   Resize  false       window removeEventListener  mouseup   stopResize  false

User · Answer

x000D   x000D     import function get difference pre  mou      return       x  mou x - pre x      y  mou y - pre y            if your panel is in a nested environment  which the parent container s width and height does not equa to document width  and height  for example  in an element  canvas   then edit it to  function oMousePos e      var rc   canvas getBoundingClientRect      return       x  e clientX - rc left      y  e clientY - rc top             function oMousePos e      return       x  e clientX      y  e clientY          function render element styles  el      for  const  kk  vv  of Object entries styles         el style kk    vv         class MoveablePanel           prevent an element from moving out of window        constructor container  draggable  left  top        this container   container      this draggable   draggable      this left   left      this top   top      let rect   container getBoundingClientRect        this width   rect width      this height   rect height      this status   false          initial position of the panel  should not be changed     this original           left  left        top  top                current left and top postion         this left  this top          assign the panel to initial position        initalize in registration     this default         if   MoveablePanel  instance          MoveablePanel  instance                 MoveablePanel  instance push this          mousedown e        this status   true      this previous   oMousePos e         mousemove e        if   this status          return            let pos   oMousePos e       let vleft   this left   pos x - this previous x      let vtop   this top   pos y - this previous y      let kleft  ktop       if  vleft  lt  0          kleft   0        else if  vleft  gt  window innerWidth - this width          kleft   window innerWidth - this width        else         kleft   vleft             if  vtop  lt  0          ktop   0        else if  vtop  gt  window innerHeight - this height          ktop   window innerHeight - this height        else         ktop   vtop            this container style left      kleft px       this container style top      ktop px               sometimes user move the cursor too fast which mouseleave is previous than mouseup   to prevent moving too fast and break the control  mouseleave is handled the same as mouseup         mouseupleave e        if   this status          return null            this status   false      let pos   oMousePos e       let vleft   this left   pos x - this previous x      let vtop   this top   pos y - this previous y       if  vleft  lt  0          this left   0        else if  vleft  gt  window innerWidth - this width          this left   window innerWidth - this width        else         this left   vleft             if  vtop  lt  0          this top   0        else if  vtop  gt  window innerHeight - this height          this top   window innerHeight - this height        else         this top   vtop             this show        return true         default          this container style left      this original left px       this container style top      this original top px               panel with a higher z index will interupt drawing   therefore if panel is not displaying  set it with a lower z index that canvas    change index doesn t work  if panel is hiding  then we move it out   hide  record current position  move panel out   show  assign to recorded position    notice this position has nothing to do panel drag movement   they cannot share the same variable         hide            move to the right bottom conner     this container style left      window screen width px       this container style top      window screen height px          show         this container style left      this left px       this container style top      this top px            end of import  class DotButton      constructor          width px           styles     mainly pos  padding and margin  e g   top  0  left  0  margin  0           color           color hover          border     boolean         border dismiss     boolean  dismiss border when hover                this width   width px          this styles   styles          this color   color          this color hover   color hover          this border   border          this border dismiss   border dismiss             create  styles null           var el   document createElement  div            Object keys this styles  forEach kk  gt               el style kk       this styles kk  px                       if  styles               Object keys  styles  forEach kk  gt                   el style kk       this styles kk  px                                     el style width      this width px          el style height      this width px          el style position    absolute           el style left      this left px px           el style top      this top px px           el style background   this color          if this border               el style border    1px solid                      el style borderRadius      this width px            el addEventListener  mouseenter       gt               el style background   this color hover              if this border dismiss                   el style border    1px solid   this color hover                                       el addEventListener  mouseleave       gt               el style background   this color              if this border dismiss                   el style border    1px solid                                      return el           function cursor hover el  default cursor  to cursor       el addEventListener  mouseenter   function            this style cursor   to cursor        bind el          el addEventListener  mouseleave   function            this style cursor   default cursor        bind el       class FlexPanel extends MoveablePanel      constructor          parent el          top px          left px          width px           height px           background          handle width px           coner vmin ratio           button width px           button margin px                  super                   gt                   var el   document createElement  div                    render element                                                position   fixed                            top     top px px                           left     left px px                           width     width px px                           height     height px px                           background  background                                               el                                     return el                       iife returns a container  panel el              new DotButton button width px   top  0  right  0  margin  button margin px    green    lightgreen   false  false  create       draggable             left px     left             top px     top                     this draggable addEventListener  mousedown   e   gt                e preventDefault                this mousedown e                        this draggable addEventListener  mousemove   e   gt                e preventDefault                this mousemove e                        this draggable addEventListener  mouseup   e   gt                e preventDefault                this mouseupleave e                        this draggable addEventListener  mouseleave   e   gt                e preventDefault                this mouseupleave e                        this parent el   parent el          this background   background              parent         this width   width px          this height   height px           this handle width px   handle width px          this coner vmin ratio   coner vmin ratio           this panel el   document createElement  div                styles that won t change          this panel el style position    absolute           this panel el style top      this handle width px px           this panel el style left      this handle width px px            this panel el style background   this background               this handles                 this handle top              this handle left              this handle bottom              this handle right                this handle lefttop              this handle topleft              this handle topright              this handle righttop               this handle rightbottom               this handle bottomright              this handle bottomleft              this handle leftbottom               Array from  length  12   i   gt  document createElement  div              this handles forEach el  gt               el style position    absolute                        this handle topleft style top    0           this handle topleft style left      this handle width px px            this handle righttop style right    0           this handle righttop style top      this handle width px px            this handle bottomright style bottom    0           this handle bottomright style right      this handle width px px            this handle leftbottom style left    0           this handle leftbottom style bottom      this handle width px px             this handle lefttop style left    0           this handle lefttop style top    0            this handle topright style top    0           this handle topright style right    0            this handle rightbottom style right    0           this handle rightbottom style bottom    0            this handle bottomleft style bottom    0           this handle bottomleft style left    0            this update ratio                            ns-resize                     ew-resize      -              ns-resize                     ew-resize      -               nwse-resize                     nwse-resize                     nesw-resize                     nesw-resize                     nwse-resize                     nwse-resize                     nesw-resize                     nesw-resize                  map  dd  ii   gt               cursor hover this handles ii    default   dd                        this vtop   this top          this vleft   this left          this vwidth   this width          this vheight   this height           this update ratio             this handles forEach el  gt               this container appendChild el                        cursor hover this draggable   default    move             this panel el appendChild this draggable           this container appendChild this panel el           this parent el appendChild this container                          this edgemousedown               this verticalmousemove              this horizontalmousemove              this nwsemousemove              this neswmousemove              this edgemouseupleave                            this edgemousedown bind this               this verticalmousemove bind this               this horizontalmousemove bind this               this nwsemousemove bind this               this neswmousemove bind this               this edgemouseupleave bind this                       this handle top addEventListener  mousedown   e  gt  this edgemousedown e   top              this handle left addEventListener  mousedown   e  gt  this edgemousedown e   left              this handle bottom addEventListener  mousedown   e  gt  this edgemousedown e   bottom              this handle right addEventListener  mousedown   e  gt  this edgemousedown e   right               this handle lefttop addEventListener  mousedown   e  gt  this edgemousedown e   lefttop              this handle topleft addEventListener  mousedown   e  gt  this edgemousedown e   topleft              this handle topright addEventListener  mousedown   e  gt  this edgemousedown e   topright              this handle righttop addEventListener  mousedown   e  gt  this edgemousedown e   righttop               this handle rightbottom addEventListener  mousedown   e  gt  this edgemousedown e   rightbottom               this handle bottomright addEventListener  mousedown   e  gt  this edgemousedown e   bottomright              this handle bottomleft addEventListener  mousedown   e  gt  this edgemousedown e   bottomleft              this handle leftbottom addEventListener  mousedown   e  gt  this edgemousedown e   leftbottom               this handle top addEventListener  mousemove   this verticalmousemove           this handle left addEventListener  mousemove   this horizontalmousemove           this handle bottom addEventListener  mousemove   this verticalmousemove           this handle right addEventListener  mousemove   this horizontalmousemove            this handle lefttop addEventListener  mousemove   this nwsemousemove           this handle topleft addEventListener  mousemove   this nwsemousemove           this handle topright addEventListener  mousemove   this neswmousemove           this handle righttop addEventListener  mousemove   this neswmousemove            this handle rightbottom addEventListener  mousemove   this nwsemousemove            this handle bottomright addEventListener  mousemove   this nwsemousemove           this handle bottomleft addEventListener  mousemove   this neswmousemove           this handle leftbottom addEventListener  mousemove   this neswmousemove            this handle top addEventListener  mouseup   e  gt  this verticalmousemove e   this edgemouseupleave              this handle left addEventListener  mouseup   e  gt  this horizontalmousemove e   this edgemouseupleave              this handle bottom addEventListener  mouseup   e  gt  this verticalmousemove e   this edgemouseupleave              this handle right addEventListener  mouseup   e  gt  this horizontalmousemove e   this edgemouseupleave               this handle lefttop addEventListener  mouseup   e  gt  this nwsemousemove e   this edgemouseupleave              this handle topleft addEventListener  mouseup   e  gt  this nwsemousemove e   this edgemouseupleave              this handle topright addEventListener  mouseup   e  gt  this neswmousemove e   this edgemouseupleave              this handle righttop addEventListener  mouseup   e  gt  this neswmousemove e   this edgemouseupleave               this handle rightbottom addEventListener  mouseup   e  gt  this nwsemousemove e   this edgemouseupleave               this handle bottomright addEventListener  mouseup   e  gt  this nwsemousemove e   this edgemouseupleave              this handle bottomleft addEventListener  mouseup   e  gt  this neswmousemove e   this edgemouseupleave              this handle leftbottom addEventListener  mouseup   e  gt  this neswmousemove e   this edgemouseupleave                   this handle top addEventListener  mouseleave   this edgemouseupleave           this handle left addEventListener  mouseleave   this edgemouseupleave           this handle bottom addEventListener  mouseleave   this edgemouseupleave           this handle right addEventListener  mouseleave   this edgemouseupleave           this handle lefttop addEventListener  mouseleave   this edgemouseupleave           this handle topleft addEventListener  mouseleave   this edgemouseupleave           this handle topright addEventListener  mouseleave   this edgemouseupleave           this handle righttop addEventListener  mouseleave   this edgemouseupleave           this handle rightbottom addEventListener  mouseleave   this edgemouseupleave           this handle bottomright addEventListener  mouseleave   this edgemouseupleave           this handle bottomleft addEventListener  mouseleave   this edgemouseupleave           this handle leftbottom addEventListener  mouseleave   this edgemouseupleave                 box size change triggers corner handler size change     update ratio            this container style top      this vtop px           this container style left      this vleft px           this container style width      this vwidth px           this container style height      this vheight px            this panel el style width      this vwidth - 2   this handle width px px           this panel el style height      this vheight - 2   this handle width px px            this ratio   this vwidth  lt  this vheight   this coner vmin ratio   this vwidth   this coner vmin ratio   this vheight                        this handle top              this handle bottom             forEach el  gt               el style width      this vwidth - 2   this ratio px               el style height      this handle width px px                                      this handle left              this handle right             forEach el  gt               el style height      this vheight - 2   this ratio px               el style width      this handle width px px                        this handle top style top    0           this handle top style left      this ratio px            this handle left style top      this ratio px           this handle left style left    0            this handle bottom style bottom    0           this handle bottom style right      this ratio px            this handle right style bottom      this ratio px           this handle right style right    0                          this handle topright              this handle bottomleft            forEach el  gt               el style width      this ratio px               el style height      this handle width px px                                      this handle lefttop              this handle rightbottom            forEach el  gt               el style width      this handle width px px               el style height      this ratio px                                      this handle topleft              this handle bottomright            forEach el  gt               el style width      this ratio - this handle width px px               el style height      this handle width px px                                      this handle righttop              this handle leftbottom            forEach el  gt               el style height      this handle width px px               el style width      this ratio - this handle width px px                          edgemousedown e  flag           this previous   oMousePos e           this flag   flag          this drag   true             verticalmousemove e           if this drag                  -             this mouse   oMousePos e               var ydif   this mouse y - this previous y              switch this flag                   case  top                       this vtop   this top   ydif                      this vheight   this height - ydif                       this vleft   this left                      this vwidth   this width                  break                   case  bottom                       this vheight   this height   ydif                       this vtop   this top                      this vleft   this left                      this vwidth   this width                  break                            this update ratio                         horizontalmousemove e           if this drag                                this mouse   oMousePos e               var xdif   this mouse x - this previous x              switch this flag                   case  left                       this vleft   this left   xdif                      this vwidth   this width - xdif                       this vtop   this top                      this vheight   this height                  break                   case  right                       this vwidth   this width   xdif                                       this vtop   this top                      this vleft   this left                      this vheight   this height                  break                            this update ratio                         nwsemousemove e           if this drag                                this mouse   oMousePos e               var ydif   this mouse y - this previous y              var xdif   this mouse x - this previous x              switch this flag                   case  topleft                       this vleft   this left   xdif                      this vtop   this top   ydif                      this vwidth   this width - xdif                      this vheight   this height - ydif                  break                   case  lefttop                       this vleft   this left   xdif                      this vtop   this top   ydif                      this vwidth   this width - xdif                      this vheight   this height - ydif                  break                   case  bottomright                       this vwidth   this width   xdif                      this vheight   this height   ydif                       this vtop   this top                      this vleft   this left                  break                   case  rightbottom                       this vwidth   this width   xdif                      this vheight   this height   ydif                       this vtop   this top                      this vleft   this left                  break                            this update ratio                         neswmousemove e           if this drag                                this mouse   oMousePos e               var ydif   this mouse y - this previous y              var xdif   this mouse x - this previous x              switch this flag                   case  topright                       this vtop   this top   ydif                      this vwidth   this width   xdif                      this vheight   this height - ydif                       this vleft   this left                  break                   case  righttop                       this vtop   this top   ydif                      this vwidth   this width   xdif                      this vheight   this height - ydif                       this vleft   this left                  break                   case  bottomleft                       this vleft   this left   xdif                      this vwidth   this width - xdif                      this vheight   this height   ydif                       this vtop   this top                  break                   case  leftbottom                       this vleft   this left   xdif                      this vwidth   this width - xdif                      this vheight   this height   ydif                       this vtop   this top                  break                            this update ratio                         edgemouseupleave            this drag   false          this top   this vtop          this left   this vleft          this width   this vwidth          this height   this vheight             mouseupleave e           if super mouseupleave e                this vtop   this top              this vleft   this left                               var fp   new FlexPanel      document body     parent div container     20     top margin     20     left margin     200     width      150     height      lightgrey      background     20     handle height when horizontal  handle width when vertical     0 2     edge up and left resize bar width   top resize bar width   1   5     35     green move button width and height     2     button margin        this method creates an element for you which you don t need to pass in a selected element  to manipuate dom element fp container - gt  entire panel fp panel el - gt  inside panel    x000D   x000D   x000D   Achieving functionalities fully requires a lot of hard coding  Please refer to the documentation  it will show you how to use each class as element

User · Answer

See my cross browser compatible resizer    x000D   x000D       lt  doctype html gt  x000D       lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D       lt head gt  x000D           lt title gt resizer lt  title gt  x000D           lt meta name  author  content  Andrej Hristoliubov anhr mail ru  gt  x000D           lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt  x000D           lt script type  text javascript  src  https   rawgit com anhr resizer master Common js  gt  lt  script gt  x000D           lt script type  text javascript  src  https   rawgit com anhr resizer master resizer js  gt  lt  script gt  x000D           lt style gt  x000D               element   x000D                  border  1px solid  999999  x000D                  border-radius  4px  x000D                  margin  5px  x000D                  padding  5px  x000D                x000D           lt  style gt  x000D           lt script type  text javascript  gt  x000D              function onresize     x000D                  var element1   document getElementById  element1    x000D                  var element2   document getElementById  element2    x000D                  var element3   document getElementById  element3    x000D                  var ResizerY   document getElementById  resizerY    x000D                  ResizerY style top   element3 offsetTop - 15    px   x000D                  var topElements   document getElementById  topElements    x000D                  topElements style height   ResizerY offsetTop - 20    px   x000D                  var height   topElements clientHeight - 32  x000D                  if  height  lt  0  x000D                      height   0  x000D                  height     px   x000D                  element1 style height   height  x000D                  element2 style height   height  x000D                x000D              function resizeX x    x000D                    consoleLog  mousemove X       e pageX         x000D                  var element2   document getElementById  element2    x000D                  element2 style width   x000D                      element2 parentElement clientWidth x000D                        document getElementById  rezizeArea   offsetLeft x000D                      - x x000D                         px   x000D                x000D              function resizeY y    x000D                    consoleLog  mousemove Y       e pageY         x000D                  var element3   document getElementById  element3    x000D                  var height   x000D                      element3 parentElement clientHeight x000D                        document getElementById  rezizeArea   offsetTop x000D                      - y x000D                    x000D                    consoleLog  mousemove Y       e pageY      height       height     element3 parentElement clientHeight       element3 parentElement clientHeight   x000D                  if   height   100   gt  element3 parentElement clientHeight  x000D                      return   Limit of the height of the elemtnt 3 x000D                  element3 style height   height    px   x000D                  onresize    x000D                x000D              var emailSubject    Resizer example error   x000D           lt  script gt  x000D       lt  head gt  x000D       lt body gt  x000D           lt div id  Message  gt  lt  div gt  x000D           lt h1 gt Resizer lt  h1 gt  x000D           lt p gt Please see example of resizing of the HTML element by mouse dragging  lt  p gt  x000D           lt ul gt  x000D               lt li gt Drag the red rectangle if you want to change the width of the Element 1 and Element 2 lt  li gt  x000D               lt li gt Drag the green rectangle if you want to change the height of the Element 1 Element 2 and Element 3 lt  li gt  x000D               lt li gt Drag the small blue square at the left bottom of the Element 2  if you want to resize of the Element 1 Element 2 and Element 3 lt  li gt  x000D           lt  ul gt  x000D           lt div id  rezizeArea  style  width 1000px  height 250px  overflow auto  position  relative   class  element  gt  x000D               lt div id  topElements  class  element  style  overflow auto  position absolute  left  0  top  0  right 0   gt  x000D                   lt div id  element2  class  element  style  width  30   height 10px  float  right  position  relative   gt  x000D                      Element 2 x000D                       lt div id  resizerXY  style  width  10px  height  10px  background  blue  position absolute  left  0  bottom  0   gt  lt  div gt  x000D                       lt script type  text javascript  gt  x000D                          resizerXY  resizerXY   function  e    x000D                                  resizeX e pageX   10   x000D                                  resizeY e pageY   50   x000D                                  x000D                       lt  script gt  x000D                   lt  div gt  x000D                   lt div id  resizerX  style  width  10px  height 100   background  red  float  right   gt  lt  div gt  x000D                   lt script type  text javascript  gt  x000D                      resizerX  resizerX   function  e    x000D                          resizeX e pageX   25   x000D                          x000D                   lt  script gt  x000D                   lt div id  element1  class  element  style  height 10px  overflow auto   gt Element 1 lt  div gt  x000D               lt  div gt  x000D               lt div id  resizerY  style  height 10px  position absolute  left  0  right 0  background  green   gt  lt  div gt  x000D               lt script type  text javascript  gt  x000D                  resizerY  resizerY   function  e    x000D                      resizeY e pageY   25   x000D                      x000D               lt  script gt  x000D               lt div id  element3  class  element  style  height 100px  position absolute  left  0  bottom  0  right 0   gt Element 3 lt  div gt  x000D           lt  div gt  x000D           lt script type  text javascript  gt  x000D              onresize    x000D           lt  script gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D    Also see my example of resizer

User · Answer

what about a pure css3 solution   div       resize  both      overflow  auto       MDN Web Docs  W3Schools example  Browser support

User · Answer

There are very good examples here to start trying with  but all of them are based on adding some extra or external element like a  div  as a reference element to drag it  and calculate the new dimensions or position of the original element   Here s an example that doesn t use any extra elements  We could add borders  padding or margin without affecting its operation  In this example we have not added color  nor any visual reference to the borders nor to the lower right corner as a clue where you can enlarge or reduce dimensions  but using the cursor around the resizable elements the clues appears   let resizerForCenter   new Resizer  center     resizerForCenter initResizer     See it in action with CodeSandbox   In this example we use ES6  and a module that exports a class called Resizer  An example is worth a thousand words     Or with the code snippet    x000D   x000D  const html   document querySelector  html   x000D   x000D  class Resizer   x000D   constructor elemId    x000D    this  elem   document getElementById elemId  x000D        x000D       Stored binded context handlers for method passed to eventListeners  x000D        x000D       See  https   stackoverflow com questions 9720927 removing-event-listeners-as-class-prototype-functions x000D        x000D    this  checkBorderHandler   this  checkBorder bind this  x000D    this  doResizeHandler    this  doResize bind this  x000D    this  initResizerHandler   this initResizer bind this  x000D    this  onResizeHandler    this  onResize bind this  x000D     x000D   x000D   initResizer     x000D    this stopResizer   x000D    this  beginResizer   x000D     x000D   x000D    beginResizer     x000D    this  elem addEventListener  mousemove   this  checkBorderHandler  false  x000D     x000D   x000D   stopResizer     x000D    html style cursor    default  x000D    this  elem style cursor    default  x000D     x000D    window removeEventListener  mousemove   this  doResizeHandler  false  x000D    window removeEventListener  mouseup   this  initResizerHandler  false  x000D   x000D    this  elem removeEventListener  mousedown   this  onResizeHandler  false  x000D    this  elem removeEventListener  mousemove   this  checkBorderHandler  false  x000D     x000D   x000D    doResize e    x000D    let elem   this  elem x000D   x000D    let boxSizing   getComputedStyle elem  boxSizing x000D    let borderRight   0 x000D    let borderLeft   0 x000D    let borderTop   0 x000D    let borderBottom   0 x000D   x000D    let paddingRight   0 x000D    let paddingLeft   0 x000D    let paddingTop   0 x000D    let paddingBottom   0 x000D   x000D    switch  boxSizing    x000D     case  content-box   x000D       paddingRight   parseInt getComputedStyle elem  paddingRight  x000D       paddingLeft   parseInt getComputedStyle elem  paddingLeft  x000D       paddingTop   parseInt getComputedStyle elem  paddingTop  x000D       paddingBottom   parseInt getComputedStyle elem  paddingBottom  x000D      break x000D     case  border-box   x000D       borderRight   parseInt getComputedStyle elem  borderRight  x000D       borderLeft   parseInt getComputedStyle elem  borderLeft  x000D       borderTop   parseInt getComputedStyle elem  borderTop  x000D       borderBottom   parseInt getComputedStyle elem  borderBottom  x000D      break x000D     default  break x000D      x000D   x000D    let horizontalAdjustment    paddingRight   paddingLeft  -  borderRight   borderLeft  x000D    let verticalAdjustment     paddingTop   paddingBottom  -  borderTop   borderBottom  x000D   x000D    let newWidth   elem clientWidth    e movementX - horizontalAdjustment    px  x000D    let newHeight   elem clientHeight   e movementY - verticalAdjustment      px  x000D     x000D    let cursorType   getComputedStyle elem  cursor x000D    switch  cursorType    x000D     case  all-scroll   x000D       elem style width   newWidth x000D       elem style height   newHeight x000D      break x000D     case  col-resize   x000D       elem style width   newWidth x000D      break x000D     case  row-resize   x000D       elem style height   newHeight x000D      break x000D     default  break x000D      x000D     x000D   x000D    onResize e    x000D       On resizing state  x000D    let elem   e target x000D    let newCursorType   undefined x000D    let cursorType   getComputedStyle elem  cursor x000D    switch  cursorType    x000D     case  nwse-resize   x000D      newCursorType    all-scroll  x000D      break x000D     case  ew-resize   x000D      newCursorType    col-resize  x000D      break x000D     case  ns-resize   x000D      newCursorType    row-resize  x000D      break x000D     default  break x000D      x000D     x000D    html style cursor   newCursorType    Avoid cursor s flickering  x000D    elem style cursor   newCursorType x000D     x000D       Remove what is not necessary  and could have side effects  x000D    elem removeEventListener  mousemove   this  checkBorderHandler  false   x000D     x000D       Events on resizing state x000D        x000D       We do not apply the mousemove event on the elem to resize it  but to the window to prevent the mousemove from slippe out of the elem to resize  This work bc we calculate things based on the mouse position x000D        x000D    window addEventListener  mousemove   this  doResizeHandler  false   x000D    window addEventListener  mouseup   this  initResizerHandler  false   x000D     x000D   x000D    checkBorder e    x000D    const elem   e target x000D    const borderSensitivity   5 x000D    const coor   getCoordenatesCursor e  x000D    const onRightBorder      coor x   borderSensitivity   gt  elem scrollWidth  x000D    const onBottomBorder     coor y   borderSensitivity   gt  elem scrollHeight  x000D    const onBottomRightCorner    onRightBorder  amp  amp  onBottomBorder  x000D     x000D    if  onBottomRightCorner    x000D     elem style cursor    nwse-resize  x000D      else if  onRightBorder    x000D     elem style cursor    ew-resize  x000D      else if  onBottomBorder    x000D     elem style cursor    ns-resize  x000D      else   x000D     elem style cursor    auto  x000D      x000D     x000D    if  onRightBorder    onBottomBorder    x000D     elem addEventListener  mousedown   this  onResizeHandler  false  x000D      else   x000D     elem removeEventListener  mousedown   this  onResizeHandler  false  x000D      x000D     x000D    x000D   x000D  function getCoordenatesCursor e    x000D   let elem   e target  x000D    x000D      Get the Viewport-relative coordinates of cursor  x000D   let viewportX   e clientX x000D   let viewportY   e clientY x000D    x000D      Viewport-relative position of the target element  x000D   let elemRectangle   elem getBoundingClientRect   x000D    x000D      The  function returns the largest integer less than or equal to a given number  x000D   let x   Math floor viewportX - elemRectangle left     - elem scrollWidth x000D   let y   Math floor viewportY - elemRectangle top     - elem scrollHeight x000D    x000D   return  x  y  x000D    x000D   x000D  let resizerForCenter   new Resizer  center   x000D  resizerForCenter initResizer   x000D   x000D  let resizerForLeft   new Resizer  left   x000D  resizerForLeft initResizer   x000D   x000D  setTimeout handler  10000  true      10s x000D   x000D  function handler     x000D    resizerForCenter stopResizer   x000D    x000D  body   x000D   background-color  white  x000D    x000D   x000D   wrapper div   x000D      box-sizing  border-box     x000D   position  relative  x000D   float left  x000D   overflow  hidden  x000D   height  50px  x000D   width  50px  x000D   padding  3px  x000D    x000D   x000D   left   x000D   background-color  blueviolet  x000D    x000D   center   x000D   background-color lawngreen   x000D    x000D   right   x000D   background  blueviolet  x000D    x000D   wrapper   x000D   border  5px solid hotpink  x000D   display  inline-block  x000D    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D    lt meta charset  UTF-8  gt  x000D    lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D    lt meta http-equiv  X-UA-Compatible  content  ie edge  gt  x000D    lt title gt Resizer v0 0 1 lt  title gt  x000D   lt  head gt  x000D     lt body gt  x000D       lt div id  wrapper  gt  x000D         lt div id  left  gt Left lt  div gt  x000D         lt div id  center  gt Center lt  div gt  x000D         lt div id  right  gt Right lt  div gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

x000D   x000D  var resizeHandle   document getElementById  resizable    x000D  var box   document getElementById  resize    x000D  resizeHandle addEventListener  mousedown   initialiseResize  false   x000D   x000D  function initialiseResize e    x000D    window addEventListener  mousemove   startResizing  false   x000D    window addEventListener  mouseup   stopResizing  false   x000D    x000D   x000D  function stopResizing e    x000D    window removeEventListener  mousemove   startResizing  false   x000D    window removeEventListener  mouseup   stopResizing  false   x000D    x000D   x000D  function startResizing e    x000D    box style width    e clientX     px   x000D    box style height    e clientY     px   x000D    x000D   x000D  function startResizing e    x000D    box style width    e clientX - box offsetLeft     px   x000D    box style height    e clientY - box offsetTop     px   x000D    x000D   resize   x000D    position  relative  x000D    width  130px  x000D    height  130px  x000D    border  2px solid blue  x000D    color  white  x000D    x000D   x000D   resizable   x000D    background-color  white  x000D    width  10px  x000D    height  10px  x000D    cursor  se-resize  x000D    position  absolute  x000D    right  0  x000D    bottom  0  x000D    x000D   lt div id  resize  gt  x000D   x000D     lt div id  resizable  gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

I really recommend using some sort of library  but you asked for it  you get it   var p   document querySelector  p       element to make resizable  p addEventListener  click   function init         p removeEventListener  click   init  false       p className   p className     resizable       var resizer   document createElement  div        resizer className    resizer       p appendChild resizer       resizer addEventListener  mousedown   initDrag  false      false    var startX  startY  startWidth  startHeight   function initDrag e       startX   e clientX     startY   e clientY     startWidth   parseInt document defaultView getComputedStyle p  width  10      startHeight   parseInt document defaultView getComputedStyle p  height  10      document documentElement addEventListener  mousemove   doDrag  false      document documentElement addEventListener  mouseup   stopDrag  false      function doDrag e       p style width    startWidth   e clientX - startX     px      p style height    startHeight   e clientY - startY     px      function stopDrag e        document documentElement removeEventListener  mousemove   doDrag  false       document documentElement removeEventListener  mouseup   stopDrag  false       Demo  Remember that this may not run in all browsers  tested only in Firefox  definitely not working in IE  lt 9

User · Answer

just using the mousemove event in vanilla js steps  add the mousemove to your target  listen to the target move event  get the pointer position  resize your target   codes     const div   document querySelector  div before        const box   document querySelector  div container        box addEventListener  mousemove    e    gt          const           offsetX          offsetY            e        div style width   offsetX    px            live demo https   codepen io xgqfrms full wvMQqZL  refs https   developer mozilla org en-US docs Web API Element mousemove event https   medium com the-z making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

[javascript] How to make HTML element resizable using pure Javascript?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to dom-events