jquery draggable：框的外边框上的可拖动的句柄选项？

Question

如何将jquery draggable的handle选项配置到外层而不是框的内层？

例如，我想拖动下面的这个弹出框，当只有光标被点击并拖动到这个弹出窗口的黑色边框上，但不是内容区域。

可能吗？

jsfiddle

目前箱子拖到无论你在内容区域或黑色边框光标。

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

您将需要使用可拖动的cancel选项，该选项将防止拖动特定元素。

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

DEMO：http://jsfiddle.net/dirtyd77/4bCed/1/

希望这有助于！