Question

我想创建一个可拖动的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>

Answer 1

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

基本上要让你的盒子可以拖动并被容器绑定，使用{containment: parent}，如here所述。

更新:(因为链接不适合你）

<强>脚本：

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

希望这有帮助！

Answer 2

我调查你的javascript应该如下;

<script type="text/javascript">

    $(document).ready(function () {

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

    });

 </script>

希望这有帮助

在另一个div中创建一个可拖动的分区

2 个答案: