jquery - 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

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

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

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

希望这可以帮助！