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

When draggable is enabled, it allows dialog to be dragged by title bar.

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

Anyone knows a way to make it draggable by some other, custom element within dialog body? (in addition to title bar itself)

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

1 个解决方案

#1

I know, that answering own question is not the best way, but since no one got here before me - here it is:

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

if you want to see fiddle - please find it using this code: jeffz2012/CRRWb/,

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

because this a bit buggy system does not allow me to enter both - watch this, if you do not believe: 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" );
});

#1