3

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

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

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

2 ответа 2

2

Если тебе нужно изменять ширину блока мышкой, вот пример. Если немножко изменить скрипт, я думаю что и высоту можно менять, только 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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.