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.

Urger

What's the problem of using jquery ui .resizable jqueryui.com/resizable ? and post the html and css code – Percipient

It's not a big problem, happy to use .resizable. I just wasn't sure how to get the JQuery UI package for just the methods I need rather than importing the whole UI library. – Urger

You can choose only the methods that you want jqueryui.com/download – Percipient

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

Hibbler

Thanks..I have something similar here: jsfiddle.net/boggey79/TdtMx Problem is the container jumps to the left on-drag (Chrome 28.0.1500.72 m) – Urger

@QF_Developer I think you misattached the wrong fiddle. check this jsfiddle.net/YZX6B/11 – Hibbler

I'm getting the child jumping to the left on both your fiddle and mine when a resize is attempted. I see this in Chrome and IE...do you see this behaviour? – Urger

@QF_Developer Yup I see it. check this fiddle, I think I fixed it. jsfiddle.net/YZX6B/12 – Hibbler

Looks good! You seem to have fixed this by targeting JQuery 1.91 and UI 1.92. I'm locked to JQuery 2.0 as it's defined at the application level, can I still target UI 1.91? – Urger

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

Adjoining

It works perfectly aside from the compression of the left div contents when resizing. I'd need the resizable div to overlap the left size. – Urger

Can this solution be adjusted so threre are 3 div containers in a row? – Avidin

NOT javascript -> JQUERY – Centigrade

@Cryptopat Are you saying jQuery is not JavaScript? – Adjoining

This is exactly what i mean bravo – Centigrade

I don't think jQuery will get you very far without JavaScript in the equation. I understand your point, but it's not a very strong one. – Adjoining

Modified the Javascript and CSS slightly so that copying text is allowed, as long as you're not resizing: jsfiddle.net/T4St6/1244 – Puppetry

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

Agenda

Looks good, I'm just figuring out how I can lock down to width resizing only. – Urger

Also I need the handle on the left border rather than floating in the lower right. Does anyone know if this is possible, I'm reading through the API documentation now. – Urger

Answer 4

Try this code ..

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

You can add then a max and min Width

Percipient

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" />

Numen