jquery - How do I make a div width draggable? -
i have div nested inside div used display settings console. nested div has fixed positioned inside parent follows:
i'd add draggable handle child div's left border child div can resized on width. need add narrow div left hand border positioned can dragged , position recalculated dynamically resize child divs width property?
i'd rather stick vanilla jquery if possible rather relying on jquery ui.
i think you're looking
handles: handles can used 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 jsfiddle
edit: solved css issue, updated fiddle
Comments
Post a Comment