Как мне установить содержание в диалоге jQuery UI?

Можно ли добавить сдерживание (ограничивающее границы другого элемента) в диалоге jQuery UI?

Источник

3 ответа

Решение

Вы можете настроить таргетинг на диалоговое окно и применить к нему ограничение. Попробуй это:

var container = $('.dialog-container'),
    dialog = $('.ui-dialog');
// get container top left corner locations
var cx1 = container.offset().left,
    cy1 = container.offset().top;
// get dialog size
var dw = dialog.outerWidth(),
    dh = dialog.outerHeight();
// get container bottom right location, then subtract the dialog size
var cx2 = container.width() + cx1 - dw,
    cy2 = container.height() + cy1 - dh;
dialog.draggable( "option", "containment", [cx1, cy1, cx2, cy2] );

Изменить: я создал демо для вас.
Edit2: изменено для использования диалога externalWidth & outerHeight

Источник

@Mottie на правильном пути, но есть более простое и лучшее решение:

var container = $('.dialog-container'),
    dialog = $('.ui-dialog');
dialog.draggable( "option", "containment", container );

В отличие от решения Mottie, оно не сломается, если размер области просмотра изменится. Я разветвлял JSFiddle здесь.

Источник

@Mac на правильном пути, но решение не является полным. Вы также должны установить содержание виджета Resizable диалогового окна. Если вы только установите Draggable, вы получите сдерживание при перетаскивании, но когда вы захватите края и измените размер, вы все равно выйдете за пределы.

Итак, вы захотите сделать это, предполагая, #mydialog является элементом, из которого вы изначально создали диалог, и #boundary это элемент, которым вы хотите ограничить его (кстати, параметр контейнера также может быть селектором):

let ui = $('#mydialog').closest('.ui-dialog');       // get parent frame
ui.draggable('option', 'containment', '#boundary');  // <-- drag, but not resize
ui.resizable('option', 'containment', '#boundary');  // <-- don't forget!!!

Вот пример фрагмента, переключающий флажки, чтобы переключать ограничение соответствующего виджета между 'document' (по умолчанию) и '#area', Затем поэкспериментируйте с перетаскиванием диалога за строку заголовка и изменением его размера по краям. Обратите внимание, что происходит, когда вы выбираете только "Ограничить перетаскивание":

// Create dialog from #win with mostly default options.
$('#win').dialog({
  width: 200,
  height: 150,
  position: { my: 'center', at: 'center', of: '#area' }
});

// When checkbox changed, update confinement settings.
$('#draggable, #resizable').change(function () {
  let d = $('#draggable').prop('checked');
  let r = $('#resizable').prop('checked');
  let ui = $('#win').closest('.ui-dialog');
  ui.draggable('option', 'containment', d ? '#area' : 'document');
  ui.resizable('option', 'containment', r ? '#area' : 'document');
});
#area {
  position: relative;
  left: 2ex;
  top: 2ex;
  width: 400px;
  height: 300px;
  border: 1px solid red;
}

#win {
  font-size: 10pt;
  display: flex;
  flex-direction: column;
}

label {
  display: flex;
  align-items: center;
}
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <div>Example</div>
  <div id="area"></div>
  <div id="win" title="test">
    <label><input type="checkbox" id="draggable">Contain drag</label>
    <label><input type="checkbox" id="resizable">Contain resize</label>
  </div>
</body>

Источник
Другие вопросы по тегам