How to make resizeable?

Question

Is there a way to make a <div> container resizeable with drag & drop?

Answer 1

The best method would be to use CSS3. It supported by at least Webkit and Gecko.

According to the w3c spec:

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

Webkit and Firefox do not interpret the specs the same way. In Webkit the size is limited to the width and height set. There's another question: How can I use CSS to make an element resizable to a dimension smaller than the initial one? concerning this.

Answer 2

div {
  border: 1px solid black;
}

.resizable-content {
  min-height: 30px;
  min-width: 30px;
  resize: both;
  overflow: auto;
  max-height: fit-content;
  max-width: fit-content;
}

<div class="resizable-content">Resize Me!</div>

Answer 3

The problem with the CSS3-only method is that only the bottom-right-hand corner of the div becomes draggable. Users will almost surely want to resize the div from any of the borders, not just the bottom-right-hand corner.

After wasting a bunch of time trying to accomplish this via copying code-snippets from Stack Overflow, I would highly recommend just using the excellent InteractJS JavaScript library in your project. It allows to you easily create a resizable (and draggable) div that can be resized from all sides.

Answer 4

if you need to execute some function doOnResize(tag) for every tag (also the <div>) among the array of mustberesizeable tags, you could simple copy this array to window's one:

window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {      
  window[WIN_RESIZED].push(tags[i])
}

and after that set

window.addEventListener('resize', function(e){
  for (var i in window[WIN_RESIZED]) {
    doOnResize(window[WIN_RESIZED][i])
  }
})

where somewehere in the beginning must be written

const WIN_RESIZED = 'move_resized_divs'

with arbitrary name like 'move_resized_divs'