Jquery 在另一个分区内创建可拖动分区_Jquery_Jquery Plugins

Jquery 在另一个分区内创建可拖动分区

jquery jquery-plugins

Jquery 在另一个分区内创建可拖动分区,jquery,jquery-plugins,Jquery,Jquery Plugins,我想创建一个可拖动的div，它位于一个更大的div中。这是我的节目。但它不起作用。我猜draggable函数就是用来使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

我想创建一个可拖动的div，它位于一个更大的div中。这是我的节目。但它不起作用。我猜draggable函数就是用来使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>


第一个启用jQuery的页面
#拖拉的{
背景颜色：蓝色；
宽度：150px；
高度：150像素；
填充：0.5em；
}
$（函数（）{
$（“#可拖动”）.draggable（）；
});
海

我确认您的javascript应该如下所示

<script type="text/javascript">

    $(document).ready(function () {

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

    });

 </script>


$（文档）.ready（函数（）{
$（“#可拖动”）.draggable（）；
});

希望这对您有所帮助

我尝试修改您的代码，并在此处生成一个工作示例：

基本上，要使您的盒子可以拖动并由容器绑定，请使用

{containment:parent}

，如前所述

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

脚本：

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

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

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

希望这有帮助