jquery draggable:一个盒子外边框上的draggable手柄选项？

Question

如何配置handle外层的jquery draggable 选项,而不是盒子的内层？

例如,我想拖动下面的弹出框,只有光标被点击并拖动到此弹出窗口的黑色边框上,而不是内容区域.

可能吗？

的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

您将需要使用draggable的取消选项,这将阻止拖动特定元素.

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

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

希望这可以帮助!