jQuery UIダイアログ/ドラッグ質問

Question

jQuery UIダイアログを使用します。

素晴らしいですが、現在、ダイアログをドラッグすると、画面外に移動することはありません（ダイアログ全体が常にビューポート内にあります）。

ダイアログを部分的にドラッグするようにダイアログを設定する方法はありますか？

Answer 1

確かに（位置x、yは、ビューポート内にある場合、有効な）ただ、このコードが含まれます'を封じ込めを無効にするfalseとする。

Answer 2

オプションのpositionで再生します。ボックスを移動するには、独自のJavaScript呼び出しを記述します。

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

しかし、あなたは（それが有効な位置をチェックするコードブロックを更新し、jqueryのUIダイアログを拡張し、あなたがそのような機能を持つようにしたい場合は、あなた自身を書き、ビューポートの外箱を移動することはできません。

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

それは「ドキュメントの既定の封じ込め値を上書きします：あなたはjQueryのダイアログのコードを拡張することができた場合

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

それとも、より単純で、「jQueryの道」でそれを行うことができます。 ）

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