jquery draggable: draggable在框的外部边框上的句柄选项？

Question

如何将jquery的handle选项配置为外部层，而不是框的内部层？

例如，当只单击光标并在此弹出窗口的黑色边框上拖动时，我希望将此弹出框拖到下面，而不是内容区域。

有可能吗？

小提琴

当前，该框将被拖到内容区域或黑色边框中。

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>

或者你可以提出更好的解决方案？

Answer 1

您将希望使用draggable的取消选项，这将防止拖动特定的元素。

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

演示：http://jsfiddle.net/dirtyd77/4bCed/1/

希望这能有所帮助！