it-swarm.com.ru

Как сделать div ширину перетаскиваемой?

У меня есть div, вложенный в другой div, который используется для отображения консоли настроек. Вложенный div имеет фиксированное положение внутри родителя следующим образом:

Div arrangement

Я хотел бы добавить перетаскиваемый маркер к левой границе дочернего элемента div, чтобы размер дочернего элемента div можно было изменять по ширине. Нужно ли добавлять еще один очень узкий элемент div, где левая граница расположена так, чтобы его можно было перетаскивать и пересчитывать позицию для динамического изменения размера дочернего элемента divs?

Я бы предпочел придерживаться Vanilla JQuery, если это возможно, а не полагаться на JQuery UI.

16
QFDev

Я думаю, это то, что вы ищете 

handles: Какие маркеры можно использовать для изменения размера.

Пример:$( ".selector" ).resizable({ handles: "n, e, s, w" });

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    position: relative;
    width: 800px;
    height: 500px;
    background: #000;
}
.child {
    position: absolute;
   right: 0;
    top: 0;
    width: 200px;
    height: 100%;        
    background: #ccc;
}

JS: 

$('.child').resizable({
    handles: 'n,w,s,e',
    minWidth: 200,
    maxWidth: 400
});

проверить это JSFiddle

Правка: Решена проблема css, Обновлена ​​скрипка

15
Praveen

Это может быть достигнуто довольно легко с помощью Vanilla JQuery, так сказать. Однако я предлагаю использовать более эффективный макет разметки, иначе вы столкнетесь с некоторыми проблемами относительного положения/размера.

Я бы использовал один контейнер и 2 детей. У одного из дочерних элементов (у второго или справа) будет прозрачная ручка, но небольшой ширины. Для jQuery вы просто прикрепите событие указателя мыши к этому дескриптору и соответственно отрегулируете размеры других дочерних элементов. Вот примерно так это будет выглядеть.

HTML

<div id="container">
    <!-- Left side -->
    <div id="left"> This is the left side's content! </div>
    <!-- Right side -->
    <div id="right">
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side's content!
    </div>
</div>

JavaScript

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        left = $('#left'),
        right = $('#right'),
        handle = $('#handle');

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

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css('right', offsetRight);
        right.css('width', offsetRight);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});

JSFiddle

9
Austin Brunkhorst

Используйте jQuery UI Resizable, как упомянуто в комментарии. Посмотрите на этот пример: http://jqueryui.com/resizable/#max-min

EDIT: Чтобы зафиксировать его только для изменения ширины, установите minHeight равным maxHeight. Это, вероятно, должно сделать это.

Пример кода выше:

$(function() {
  $( "#resizable" ).resizable({
    minHeight: 250,
    maxHeight: 250,
    minWidth: 200,
    maxWidth: 350
  });
});

Правка 2: Для применения дескрипторов можно использовать разные способы: прочитайте документацию http://api.jqueryui.com/resizable/#option-handles

3
AntonNiklasson

Попробуйте этот код ..

$('.child').resizable({
    handles: 'w'
});

Вы можете добавить максимальную и минимальную ширину

1
Sbml

Вы также можете прикрепить обработчик событий, как показано ниже, что полезно, если вы хотите что-то сделать в начале или в конце изменения размера. 

$("#resizeableElementId").resizable({handles: 'n,w,s,e', minWidth: 200, maxWidth: 600}); 

$("#resizeableElementId").on( "resizestop", function( event, ui ) {

    console.log('resize ended');
    console.dir(event);

});

Помните, что вам нужно также включить jQuery UI; скачать его и добавить что-то вроде этого:

<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.1.custom/jquery-ui.min.css" />
0
paulo62