Ошибка в перетаскиваемом пользовательском интерфейсе jQuery

#javascript #jquery #jquery-ui

#javascript #jquery #jquery-пользовательский интерфейс

Вопрос:

Я не знаю, как ее решить, но посмотрите на это: введите описание изображения здесь

Когда я нажимаю вправо или вниз, появляются полосы прокрутки. Вот код:

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

HTML-код:

 <!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;
}
...

Я не знаю, почему это так, как я могу решить эту проблему?

PS Я пытался использовать containment: "body" , но в Firefox это не работает.

Я добавил новый div <div id="wow">test</div> , который является стандартным div без какого-либо css, и изменил JS на: $('#wow').draggable({stack: "#wow",containment: "document",scroll: false}); и тот же эффект! Снова полосы прокрутки: (

Ответ №1:

Это не проблема пользовательского интерфейса jQuery, это CSS

Попробуйте это:

 body{
overflow: hidden;
}