Question

使用jQuery UI对话框。

效果很好，但是目前，当我拖动一个对话框时，它不会移出屏幕（整个对话框总是在视口中）。

有没有办法设置对话框，以便我可以将其部分拖离屏幕？

Answer 1

或者你可以用更简单，更“jQuery的方式”来实现;）

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

Answer 2

如果你扩展jQuery对话框代码，你肯定可以。只需包含此代码：

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

它将使用false覆盖默认的“文档”包含值，从而禁用包含。

Answer 3

我有同样的问题，并且打算使用betamax's solution，但注意到它有效地取代了一些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);
    };
}

Answer 4

使用选项，位置进行游戏。编写自己的javascript调用以移动框。

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

但你不能将框移出视口，如果你想拥有这样的功能，自己编写，扩展jquery ui对话框，（更新代码块，检查有效位置）位置x，y在视口中）

jQuery UI对话框/拖动问题

4 个答案: