Диалоговое окно JQuery UI/перетаскивание

Использование jQuery UI Dialog.

Отлично работает, но в настоящее время, когда я перетаскиваю диалог, он не будет перемещаться за пределы экрана (весь диалог всегда находится в окне просмотра).

Есть ли способ настроить диалог, чтобы я мог частично перетащить его на экран?

Ответ 1

Конечно, вы можете расширить код диалога jQuery. Просто включите этот код:

$.ui.dialog.prototype._makeDraggable = function() { 
    this.uiDialog.draggable({
        containment: false
    });
};

Он переопределит значение удержания по умолчанию для "документа" с помощью false, которое отключит защитную оболочку.

Ответ 2

Или вы можете сделать это более простым и более "jQuery способом";)

$(document).ready(function(){
    $('#dialog').
    dialog({
        //your dialog options go here
    }).
    dialog("widget").draggable("option","containment","none"); //this chained sequence kills containment  
});

Ответ 3

У меня была эта же проблема и я собирался использовать бетамакс-решение, но заметил, что он эффективно заменяет некоторые встроенные функции jQuery UI. Поэтому вместо этого я адаптировал подход к сохранению встроенных функций, но также отключил смену, переопределив _makeDraggable, а не просто полностью заменив его:

if (!$.ui.dialog.prototype._makeDraggableBase) {
    $.ui.dialog.prototype._makeDraggableBase = $.ui.dialog.prototype._makeDraggable;
    $.ui.dialog.prototype._makeDraggable = function() {
        this._makeDraggableBase();
        this.uiDialog.draggable("option", "containment", false);
    };
}

Ответ 4

Играйте с опцией, позицией. Напишите свои собственные javascript-вызовы, чтобы переместить поле.

   $('#dialog').dialog('option','position',[500, 100]);

но вы не можете переместить окно из порта просмотра, если вы хотите иметь такую функцию, напишите свой собственный, расширяя диалог jquery ui (обновите блок кода, где он проверяет правильную позицию (действителен, если положение x, y находятся в окне просмотра)