javascript - 如何在展开的 div 中使滚动条与对话框一起移动

Question

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

我在顶部固定了一个菜单 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);
        }
    }
});

Answer 1

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

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

我添加了这些:

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

在底部所以它可以被全局访问，
然后添加这些函数来存储 body 的宽度和高度然后让它成为20000然后让它可以拖动所以它可以被拖动!在 begin 释放后，它必须再次不可拖动!:

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

最后我应该在拖动时把原来的 body 数量放回去，因为它不再检查 body 了!我可以把它放在 dragStart 事件上:

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

还有一个解决办法就是让它在鼠标离开这里时没有bug:
像这样制作 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);}
},

所以他们会在必要时得到零钱 希望对你有帮助