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

时间:2012-07-20 06:40:30

标签: jquery jquery-plugins

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

2 个答案:

答案 0 :(得分: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;}​

希望这有帮助!

答案 1 :(得分:0)

我调查你的javascript应该如下;

<script type="text/javascript">

    $(document).ready(function () {

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

    });

 </script>

希望这有帮助