How do I make a div width draggable?

Question

I have a div nested inside another div which is used to display a settings console. The nested div has a fixed positioned inside the parent as follows:

I'd like to add a draggable handle to the child div's left border so that the child div can be resized on the width. Do I need to add another very narrow div where the left hand border is positioned so that this can be dragged and the position recalculated to dynamically resize the child divs width property?

I'd rather stick to vanilla JQuery if possible rather than relying on JQuery UI.

Answer 1

I think this is what you're looking for

handles: Which handles can be used for resizing.

Example: $( ".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
});

check this JSFiddle

EDIT: Solved the css issue, Updated fiddle

Answer 2

This can be achieved pretty easily with vanilla jQuery so to speak. I suggest using a more efficient markup layout however, or you'll run in to some relative position/size issues.

I would use one container, and 2 children. In one of the children (the second one, or right side) will contain a handle that's transparent but a small width. For the jQuery, you'll just attach a mouse down event to that handle and adjust the sizes of the other children accordingly. Here's roughly how that will look.

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

Answer 3

Use the jQuery UI Resizable interaction, as mentioned in comment. Take a look at this example: http://jqueryui.com/resizable/#max-min

EDIT: To lock it down to only resizing the width, set the minHeight equal to maxHeight. That should probably do it.

Code from above example:

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

EDIT 2: For aplying handles any different ways: read the doc http://api.jqueryui.com/resizable/#option-handles

Answer 4

Try this code ..

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

You can add then a max and min Width

Answer 5

You can also attach an event handler as shown below, which is useful if you want to do something at the start or end of the resize.

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

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

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

});

Remember that you need to include jQuery UI too; download it and add something like this:

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