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

Question

How can I configure jquery draggable's handle option to the outer layer but not the inner layer of a box?

For instance, I want to drag this popup box below, when only the cursor is clicked and dragged on the black border of this popup, but not the content area.

Is it possible?

jsfiddle

Currently the box is dragged either you have your cursor in content area or the 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 you could suggest?

Answer 1

You will want to use draggable's cancel option, which will 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 this helps!