Jquery draggable: draggable handle option on outer window border?
How to set jquery draggable handle
to outer layer but not inner window layer?
For example, I want to drag this popup below when only the cursor is clicked and dragged to the black border of that popup but not the content area.
Is it possible?
Currently the window is being dragged either you have your cursor in the content area or on a black border.
JQuery
$(document).ready(function(){
// Attach the 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 are better solutions that you could suggest?
+3
source to share
1 answer
You need to use the draggable cancel option , which will prevent individual items from being dragged.
$('.ps-popup-outer').draggable({
cursor: "move",
handle: ".ps-popup-outer",
cancel: ".ps-popup-inner"
});
DEMO: http://jsfiddle.net/dirtyd77/4bCed/1/
Hope this helps!
+8
source to share