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/

希望這有助於！