jquery ui对话框可以通过除标题栏之外的其他元素进行拖动

Question

启用拖动功能后，它允许通过标题栏拖动对话框。

任何人都知道如何通过对话框体内的其他自定义元素使其可拖动？ （除了标题栏本身）

Answer 1

我知道，回答自己的问题不是最好的方法，但因为没有人来到我面前 - 这就是：

如果你想看小提琴 - 请使用以下代码找到它：jeffz2012 / CRRWb /，

因为这个有点错误的系统不允许我同时输入 - 如果你不相信，请观看这​​个： screen recording

//css
.ui-dialog-bottomdrag {
    position: absolute !important;
    background-color: #ccc;
    height: 20px !important;
    width: 98%;
    bottom: 0px;
    margin: 0 !important;
    padding: 0 !important;
}

//html
<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

//js-jquery
$( "#dialog" ).dialog({
    autoOpen: false,
    create: function( event, ui ) {
        $('.ui-dialog').append('<span class="ui-dialog-titlebar ui-dialog-bottomdrag"></span>');
    }
});
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});