Блог

Главная - Вопросы по программированию - Измените высоту div с помощью перетаскивания

Измените высоту div с помощью перетаскивания

#javascript #html #jquery #css

Вопрос:

У меня есть div с именем showfilteredhistory, содержащий элементы списка и имеющий высоту 70 пикселей. Я хочу изменить высоту этого div в соответствии с перетаскиванием «курсора». Я пытался использовать свойство resize внутри div, но я хочу изменить его в соответствии с идентификатором «перетаскивания».

 var isResizing = false,
        lastDownX = 0;

    $(function () {
        var container = $('#container'),
            top = $('#JobHistory'),
            filteredhistory = $('#showfilteredhistory'),
            bottom = $('#bottom-panel'),
            handle = $('#drag');

        handle.on('mousedown', function (e) {
            isResizing = true;
            lastDownX = e.clientY;
        });

        $(document).on('mousemove', function (e) {
            
            if (!isResizing)
                return;
            
            var offsetRight = container.height() - (e.clientY - container.offset().top);

            //top.css('height', offsetRight);
            filteredhistory.css('height', offsetRight);
            filteredhistory.css('max-height', offsetRight);
            filteredhistory.css('height', '');
            bottom.css('bottom', offsetRight);
        }).on('mouseup', function (e) {
            // stop resizing
            isResizing = false;
        });
    }); 
 #container {
  width:100%;
  height:100%;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
            
        <div class="row" style="margin-bottom: 15px; height:70px; overflow-y:auto; " id="showfilteredhistory">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
             <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
             <li>M</li>
            <li>N</li>
            <li>O</li>
            <li>P</li>
        </div>
               
            <div id="bottom-panel">
                <div id="drag" style="cursor:n-resize; text-align:center;">===========</div>
            </div>
        </div>

Комментарии:

1. developer.mozilla.org/en-US/docs/Web/CSS/resize

2. для этого вам нужно использовать javascript.

3. @KunalTanwar не могли бы вы, пожалуйста, поделиться со мной кодом, так как я новичок

4. Вы проводили какие-либо исследования? Потому что существует множество обучающих программ, и вы не показываете код, который вы пробовали до сих пор.

5. Я обновил свой фрагмент с помощью js, который я попробовал с помощью онлайн-репетитора

Метки: