Сделайте <div>изменяемым размером

Question

Есть ли способ сделать размер контейнера

изменяемым с помощью drag'n'drop? Чтобы пользователь мог изменить его размер с помощью drag'n'drop?

Любая помощь будет принята с благодарностью!

Answer 1

Лучший способ - использовать CSS3. Поддерживается как минимум Webkit и Gecko.

Согласно спецификации w3c :

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

Webkit и Firefox не интерпретируют спецификации одинаково. В Webkit размер ограничен шириной и высотой набора. Есть еще один вопрос: Как я могу использовать CSS, чтобы сделать элемент с изменяемыми размерами размером меньше исходного? относительно этого.

Answer 2

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

Answer 3

если вам нужно выполнить какую-то функцию doOnResize (tag) для каждого тега (также

) из массива mustberesizeable теги , вы можете просто скопировать этот массив в окно 's:

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

и после этого установить

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

где где-то в начале должно быть написано

const WIN_RESIZED = 'move_resized_divs'

с произвольным именем, например ' move_resized_divs '