0

我想创建一个更大的 div 内的可拖动 div。这是我的程序。但它不起作用。我猜可拖动功能是用来使 div 可拖动的功能。我还必须使用哪个版本？1.7.2 还是 1.3.2 ？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>First jQuery-Enabled Page</title>
        <style type="text/css">
            #draggable {
                background-color:blue;
                width: 150px;
                height: 150px;
                padding: 0.5em;
            }
        </style>
        <script type="text/javascript" src="jquery-ui-1.8.21.custom.min"></script>
        <script type="text/javascript">
            $(function() {

                $("#draggable").draggable();
            });
        </script>
    </head>

    <body>
        <div id="draggable">
            <p>hai</p>
        </div>
    </body>

</html>
4

2 回答 2

1

我尝试修改您的代码并在此处生成一个工作示例：http: //jsfiddle.net/mUa3r/

基本上要让您的盒子可拖动并由容器绑定，请使用，如此处{containment: parent}所述。

更新：（因为链接不适合你）

脚本：

    <script>
            $(function() {
            $("#draggable").draggable({containment: "parent" });
    });
    </script>

HTML：

    <div id="container">
            <div id="draggable">
                    <p>hai</p>
            </div>
    </div>

CSS：

    #container {background-color:grey; width: 300px; height: 300px;}
    #draggable {background-color:blue; width: 150px; height: 150px; padding: 0.5em;}​

希望这可以帮助！

于 2012-07-20T06:49:34.620 回答
0

我认为您的 javascript 应如下所示；

<script type="text/javascript">

    $(document).ready(function () {

       $("#draggable").draggable();

    });

 </script>

希望这可以帮助

于 2012-07-20T06:45:00.650 回答