Как разрешить вертикальное изменение размера DIV только с помощью jQuery - без плагинов? - PullRequest
Новая
       29

Как разрешить вертикальное изменение размера DIV только с помощью jQuery - без плагинов?

6 голосов
/ 30 июня 2009

Редактировать: Я поместил этот фрагмент кода в jsbin: http://jsbin.com/eneru

Я пытаюсь разрешить пользователю изменять размер (только по вертикали) элемента DIV с помощью jQuery. Я читал о jQuery UI, я попробовал, и через несколько минут у меня все заработало. Но библиотека добавляет накладные расходы ~ 25 КБ, которых я хотел бы избежать, поскольку я хочу только простое вертикальное изменение размера.

Так что я попытался сделать это самостоятельно. Вот это HTML, я использую встроенный стиль для ясности: 

<div id="frame" style="border: 1px solid green; height: 350px">
    <div style="height: 100%">Lorem ipsum blah blah</div>
    <span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>

Как видите, под элементом DIV есть небольшая полоска, поэтому пользователь может перетаскивать ее вверх или вниз, чтобы изменить размер DIV. Вот это код Javascript (с использованием jQuery): 

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origPosYGrip = $("#frame-grip").offset().top;
    var gripHeight = $("#frame-grip").height();


    $("#frame-grip").mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        resizing = true;
    });

    $("#frame-grip").mousemove(function(e) {
        if(resizing) {
            frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});

Это работает, более или менее, но если вы перетаскиваете панель слишком быстро, она перестает следовать за движением мыши и все ломается.

Это первый раз, когда я пытаюсь что-то сделать серьезное (хм) с JS и jQuery, так что я могу делать что-то глупое. Если это так, пожалуйста, скажите мне:)

Ответы [ 4 ]

14 голосов
/ 30 июня 2009

Вы делаете что-то глупое: вы пытаетесь сделать это самостоятельно.

Выслушай меня, выслушай меня: Javascript во всех браузерах - это ужасно, ужасно. Существует множество движков во многих версиях с множеством различных операционных систем, каждая из которых имеет множество тонкостей, которые делают Javascript в значительной степени адским для работы. Существует совершенно веская причина, почему такие библиотеки, как jQuery (и их расширения), приобрели популярность: многие великие программисты потратили много часов на то, чтобы абстрагироваться от всех этих ужасных несоответствий, поэтому нам не нужно об этом беспокоиться. 1005 *

Теперь я не уверен насчет вашей пользовательской базы, может быть, вы угощаете старых домохозяек, у которых все еще есть дозвон. Но по большей части в этот день и в возрасте, 25 КБ попадания в начальную загрузку страницы (как это будет кешироваться впоследствии) для уверенности в том, что это будет работать во всех браузерах последовательно, является небольшой ценой. В Javascript нет такого понятия, как «простое» изменение размера, поэтому лучше использовать пользовательский интерфейс.

7 голосов
/ 12 февраля 2012

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

    $(document).ready(function()
{
    var resizing = false;
    var frame = $("#frame").height();

    $(document).mouseup(function(event)
    {
        resizing = false;
        frame = $("#frame").height();
    });

    $("#frame-grip").mousedown(function(event)
    {
        resizing = event.pageY;
    });

    $(document).mousemove(function(event)
    {
        if (resizing)
        {
            $("#frame").height(frame + resizing - event.pageY);
        }
    });
});

живой пример того, как я его использовал, потяните красную кнопку, не хватает изображений, поэтому я заменил простым цветом. http://jsbin.com/ufuqo/23

3 голосов
/ 30 июня 2009

Я согласен с Paolo относительно использования пользовательского интерфейса, но вот некоторые изменения в вашем коде, чтобы заставить его работать: 

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");

    $(document).mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        e.preventDefault();
        resizing = true;
    });

    $(document).mousemove(function(e) {
        if(resizing) {
          var origHeightFrame = frame.height();
          var origPosYGrip = $("#frame-grip").offset().top;
          var gripHeight = $("#frame-grip").height();
          frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});
2 голосов
/ 30 июня 2009

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

$(document).ready(function(){
    var resizing = function(e) {
        var frame = $("#frame");
        var origHeightFrame = frame.height();
        var origPosYGrip = $("#frame-grip").offset().top;
        var gripHeight = $("#frame-grip").height();
        frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        return false;
    }

    var stopResizing = function(e) {
        $(document).unbind("mouseover", resizing);
    }

    $("#frame-grip").mouseup(stopResizing);

    $("#frame-grip").mousedown(function(e) {
        e.preventDefault();
        $(document).bind("mouseover", resizing).mouseup(stopResizing);
    });

});

(образец на http://jsbin.com/ufuqo)

...