jquery draggable: draggable's handle option on the outer border of a box? -

jquery draggable: draggable's handle option on the outer border of a box? -

how can configure jquery draggable's handle alternative outer layer not inner layer of box?

for instance, want drag popup box below, when cursor clicked , dragged on black border of popup, not content area.

is possible?

jsfiddle

currently box dragged either have cursor in content area or black border.

jquery,

$(document).ready(function(){ // attach jquery.ui draggable. $('.ps-popup-outer').draggable({ cursor: "move", handle: ".ps-popup-outer" }); });

html,

<div class="ps-popup-outer" style="width:400px;"> <div class="ps-popup-inner" style="height:400px;"> <div class="box-close"><input type="button" value="close" class="button-close"/></div> <div class="box-content">inner content</div> </div> </div>

or maybe there improve solutions suggest?

you want utilize draggable's cancel option, prevent dragging on particular elements.

$('.ps-popup-outer').draggable({ cursor: "move", handle: ".ps-popup-outer", cancel: ".ps-popup-inner" });

demo: http://jsfiddle.net/dirtyd77/4bced/1/

hope helps!

jquery jquery-ui jquery-ui-draggable jquery-draggable