Question

我不知道如何解决它，但看看这个： enter image description here

当我向右或向下拉时，有滚动条。这是代码：

$(this).draggable({
    stack: ".window",
    containment: "document",
    scroll: false,
...

HTML code：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Inteli Mirgo windows</title>
    <link rel="stylesheet" type="text/css" href="styles/default/style.css" media="all" />
    <link rel="stylesheet" type="text/css" href="styles/default/mirgo.css" media="all" />
    <link rel="stylesheet" href="styles/default/jquery.ui.all.css">
    <script src="scripts/jquery-1.6.2.js"></script>
    <script src="scripts/jquery.ui.core.js"></script>
    <script src="scripts/jquery.ui.widget.js"></script>
    <script src="scripts/jquery.ui.mouse.js"></script>
    <script src="scripts/jquery.ui.draggable.js"></script>
    <script src="scripts/jquery.ui.resizable.js"></script>
    <script src="scripts/jquery.ui.droppable.js"></script>
    <script src="scripts/default/mirgo.js"></script>
</head>
<body>
    <div class="window optionResizable" style="width: 300px; height: 200px; left: 150px; top: 160px;">
        <div class="titleWindow">
            Window #1
        </div>
        <div class="bodyWindow">
            Content of window #1
        </div>
    </div>
    <div class="window optionResizable" style="width: 200px; height: 100px; left: 300px; top: 140px;">
        <div class="titleWindow">
            Window #2
        </div>
        <div class="bodyWindow">
            Content of window #2
        </div>
    </div>
    <div class="window optionResizable" style="width: 500px; height: 500px; left: 600px; top: 20px;">
        <div class="titleWindow">
            Window #3
        </div>
        <div class="bodyWindow">
            Content of window #3
        </div>
    </div>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
}
body {
    background: url('images/bg.png');
    font-family: sans-serif;
    font-size: 13px;
}
.window {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    position: absolute !important;
    border: 1px solid #CFCFCF;
    -webkit-box-shadow: 1px 1px 5px 0px #BBBBBB;
    -moz-box-shadow: 1px 1px 5px 0px #BBBBBB;
    box-shadow: 1px 1px 5px 0px #BBBBBB;
}
...

我不知道为什么会这样，我怎么能解决这个问题？

P.S。我尝试使用containment: "body"，但在Firefox中它不起作用。

我添加了新的div <div id="wow">test</div>，它是没有任何css的标准div，并将JS更改为：$('#wow').draggable({stack: "#wow",containment: "document",scroll: false});并且效果相同！再次滚动:(

Answer 1

这不是jQuery UI的问题，它是CSS

试试这个：

body{
overflow: hidden;
}

jQuery UI中的漏洞可拖动

1 个答案: