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

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

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

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

Источник

7 ответов

Решение

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

Источник

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

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

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

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

Источник 
.resizable-content {
    min-height: 30px;
    min-width: 30px;
    resize: both;
    overflow: auto;
    max-height: fit-content;
    max-width: fit-content;
}
Источник

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

Источник

Источник

Лучше использовать плагин jQuery UI, он более гибкий, мы можем просто перетащить правый и нижний край любого тега html

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

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

https://stackru.com/images/3e20604c08c03a56f75a2f43e24875b70c08a957.png

Источник

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

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

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

Источник
Другие вопросы по тегам