0

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

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

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

如果我用滚轮鼠标移动滚动条，我可以看到拖动不会向上移动到新的 div 大小，而是卡在旧的 div 大小上。

TLDR：http: //jsfiddle.net/peMGg/87/

$(".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);
        }
    }
});
4

3 回答 3

2

我相信你想要这个
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);}
},

所以他们会在必要时得到改变希望它有帮助

于 2013-10-06T18:01:36.030 回答
0

我最好的猜测是溢出属性需要一些实际的溢出才能让自己完成它的工作。当您动态调整#contentDIV 的大小大于实际内容时，溢出属性将不再起作用。通过添加 amax-width和 a max-height，#content您可以达到我认为您想要的效果，或者至少它应该引导您走上正确的道路。

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

于 2013-10-04T13:54:24.387 回答
0

我对你的问题有疑问，

如果.dialog盒子重要还是背景重要#content？

我已经更新fiddle了，如果.对话框很重要，

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

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

如果有什么请回复。

编辑：更新的小提琴

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

我认为应该这样做:)

于 2013-10-04T04:39:57.653 回答