Question

如何为外层配置jquery draggable的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的cancel选项，这将阻止拖动特定元素。

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

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

希望这有帮助！

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

1 个答案: