Question

我想要做的是创建浮动对话框，然后允许用户将它们放在他们想要的任何布局中。

我在顶部修复了一个菜单div，然后是一个内容div，应该允许用户将对话框定位到方便，为此我增加了内容div的大小，以防用户想要移动一些对话框在当前可见区域之外，但这不能正常工作。

当一个对话框移动到可见部分之外时，滚动条不会跟随对话框，同时大小的增加只能运行一次，为了使div更大，我必须再次拖动它。

如果我使用滚轮鼠标移动滚动条，我可以看到拖动不会移动到新的div大小，但是会被旧的拖动。

$(".dialog").dialog({
    modal: false,
    open: function () {
        $(this).dialog("widget").appendTo("#content");
    },
    drag: function(event, ui) {
        var dlg = $(this).dialog("widget");
        var wDlg = dlg.width();
        var hDlg = dlg.height();
        var xDlg = dlg.position().left
        var yDlg = dlg.position().top;

        var wBody = $("#content").width();
        var hBody = $("#content").height();

        if(wBody - (xDlg + wDlg) < 20) {
            $("#content").width(wBody + 30);
        }
        if(hBody - (yDlg + hDlg) < 20) {
            $("#content").height(hBody + 30);
        }
    }
});

Answer 1

我相信你想要这个 http://jsfiddle.net/peMGg/102/
因为对话框最大移动取决于主体的高度和宽度，所以在使其可拖动之前应该使其无限制，这可以通过鼠标按下并释放的另一个功能来完成...
我首先在打开时使其无法打开，因此我们可以在对话框标题栏中添加功能：

open: function () {
    $(this).dialog("widget").appendTo("#content");
    $( ".dialog" ).dialog( "option", "draggable", false );
},

我添加了这些：

var wBodyy = $("body").width();
var hBodyy = $("body").height();

在底部所以它可以通过全局访问，然后添加这些函数来存储体宽和高度然后使其成为20000然后使其可拖动以便可以拖动它！并且在开始发布之后，它必须再次无法打开！：

$(".ui-dialog-titlebar").mousedown(function() {
    wBodyy = $("body").width();
    hBodyy = $("body").height();
    $("body").width(20000);
    $("body").height(20000);
    $( ".dialog" ).dialog( "option", "draggable", true );
});
$(".ui-dialog-titlebar").mouseup(function() {
    $( ".dialog" ).dialog( "option", "draggable", false );
});

最后我应该在拖动的同时放回原来的身体量，因为它不再检查身体了！我可以把它放在dragStart事件上：

dragStart: function(event, ui) {
    $("body").width(wBodyy);
    $("body").height(hBodyy);
},

当鼠标离开这里时，为了使它变得没有问题是一个解决方案：
像这样做mousedown事件：

$(".ui-dialog-titlebar").mousedown(function() {
    if ($("body").width()!=20000){
        wBodyy = $("body").width();
        $("body").width(20000);}
    if ($("body").height()!=20000){
        hBodyy = $("body").height();
        $("body").height(20000);}
    $( ".dialog" ).dialog( "option", "draggable", true );
});

所以它只在需要时改变变量！鼠标输出和拖动开始必须更改为：

$(".ui-dialog-titlebar").mouseup(function() {
        if ($("body").width()==20000){$("body").width(wBodyy);}
        if ($("body").height()==20000){$("body").height(hBodyy);}
    $( ".dialog" ).dialog( "option", "draggable", false );
});

和

dragStart: function(event, ui) {
    if ($("body").width()==20000){$("body").width(wBodyy);}
    if ($("body").height()==20000){$("body").height(hBodyy);}
},

所以他们会在nescesary上得到改变希望它有所帮助

Answer 2

我怀疑你的问题，

如果.dialog框很重要或背景为#content？

我已更新fiddle，如果.dialog框很重要，

否则请再次发布问题，我通过制作overflow:visible使滚动条不可见，这是一个应该有用的技巧。

我正在研究背景#content会在一段时间后发布新的小提琴。

如果有什么请回复。

编辑：更新小提琴

加载#content时更新fiddle2将增长到.dialog

结尾

我认为应该这样做：）

Answer 3

我最好的猜测是溢出属性需要一些实际的溢出才能让它自己完成它的工作。当您重新调整大小#content DIV大于实际内容时，溢出属性不再能够完成它的工作。通过向max-width添加max-height和#content，您可以实现我认为您想要的效果，或者至少它会引导您走上正确的道路。< / p>

http://jsfiddle.net/howlx5/Z6eHT/

如何使滚动移动与扩展div中的对话框一起移动

3 个答案: