Сделать <div> изменчивым

Ответ 1

http://docs.jquery.com/UI/Resizables

некоторые из их документации, похоже, сейчас не работают, поэтому для рабочих примеров проверьте здесь

http://batiste.dosimple.ch/blog/posts/2008-05-18-1/jquery-drag-and-drop-and-resize-event-delegation.html

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

если вам нужно выполнить некоторую функцию doOnResize (тег) для каждого тега (также <div> ) среди массива меток, подлежащих расширению, , вы можете просто скопировать этот массив в окне один:

window[WIN_RESIZED] = [] // init the window 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'

Ответ 5

Проблема метода CSS3-only состоит в том, что только нижний правый angular элемента div становится перетаскиваемым. Пройдя через кроличью дыру, пытаясь сделать это путем копирования фрагментов кода из Qaru, я настоятельно рекомендую просто использовать превосходную библиотеку JavaScript InteractJS в своем проекте. Это позволяет вам легко создавать изменяемый (и перетаскиваемый) элемент div, размер которого можно изменять со всех сторон.