Диалоговое окно 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 находятся в окне просмотра)