Как изменить размер div блока мышкой?

#javascript #html #jquery

                    
Как можно изменить высоту или ширину блока с помощью мышки, без библиотеки jquery-ui ?

Такой как здесь, только без jquery-ui, искал в интернете, но не смог найти.

Может есть какие-то другие библиотеки (размером 5-10 kb.) но не такие большие как
jquery-ui.
    

Ответы

Ответ 1

Если тебе нужно изменять ширину блока мышкой, вот пример. Если немножко изменить
скрипт, я думаю что и высоту можно менять, только css код нужно доделать.

$(document).ready(function() {
    var p = $(".pan1");
    var d = $(".pan2");
    var r = $("#resize");    
    var curr_width = p.width()
    var unlock = false;   
    $(document).mousemove(function(e) {
          var change = curr_width + (e.clientX - curr_width);       
       if(unlock) {
                if(change > 199) {
                    $("#debug").text(e.clientX + " resize");
                    p.css("width", change);
                    d.css("margin-left", change);
                }
                else {
                    p.css("width", 200);
                    d.css("margin-left", 200);
            }
        }
    });     
    r.mousedown(function(e) {
        curr_width = p.width();
        unlock = true;
        r.css("background-color", "rgba(0, 0, 0, 0.2)");
    });
    $(document).mousedown(function(e) {
        if(unlock) {
          e.preventDefault();
        }
    });
    $(document).mouseup(function(e) {
        unlock = false;
        $("#debug").text("");
        r.css("background-color", "rgba(0, 0, 0, 0.1)");
    });
});


Ответ 2

В продвинутых браузерах есть специальное свойство:

resize: none | both | horizontal | vertical


Думаю, описания значений свойства не требуется. Нужно добавить, что для всех элементов,
кроме textarea, свойство работает, только если у элемента установлено свойство overflow,
в отличное от visible значение.

Узнать, что это свойство есть, можно с помощью Modernizr, либо, просто проверить,
есть ли у элемента это свойство:

var div = document.createElement('div')
if (typeof div.style.resize == 'undefined'){
   console.log('нет');
}


Если этого свойства нет, тогда уже можно использовать для этих целей JS.