Make <div> resizeable

问题

Is there a way to make a <div> container resizeable with drag'n'drop? So that the user can change the size of it using drag'n'drop?

Any help would really be appreciated!

回答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.

回答2:

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

回答3:

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'

回答4:

Its better to use jQuery UI plugin, its more flexible, We can just drag on right and bottom edge of any html tag

 $( function() {
  $( "#resizable" ).resizable();
 });

<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

回答5:

The problem with the CSS3-only method is that only the bottom-right hand corner of the div becomes draggable. After going down the rabbit hole of trying to do 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.

来源：https://stackoverflow.com/questions/391440/make-div-resizeable