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

【问题标题】：jquery draggable: draggable's handle option on the outer border of a box?jquery draggable：框外边框上的可拖动句柄选项？
【发布时间】：2013-02-08 16:19:06
【问题描述】：

如何将 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>

或者您可以提出更好的解决方案？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-draggable

【解决方案1】：

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

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

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

希望这会有所帮助！

【讨论】：