jquery UI可拖动，在同一元素上可调整大小

在同一个元素（例如div元素）上使用Jquery UI draggable和resizeable时，我遇到了一些问题。 当我在同一个元素上应用draggable和resizeable时，它会生成一个由3个div组成的堆栈，其中一个draggable，另外两个在draggable div中。我不知道它有什么问题。我试着按照jqueryui.com上的说明去做，但我没能找出我的html有什么问题。 这是代码

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <link type="text/css" href="UI/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

    <script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>

    <script type="text/javascript" src="UI/ui.core.js"></script>

    <script type="text/javascript" src="UI/ui.draggable.js"></script>
<script type="text/javascript" src="UI/ui.resizable.js"></script>

    <style type="text/css">

        #demo-frame
        {
            border: 1px solid #DDDDDD;
            clear: right;
            height: 300px;
            overflow: hidden;

            width: 520px;
        }
        #demo-frame .demo
        {
            padding: 5px;
        }

        #demo-frame .demo div
        {
            width: 100px;
            height: 70px;
            background-color:Transparent;
            border:solid 1px black;
            cursor:move;
        }
    </style>

<script type="text/javascript">
    $(function()
    {
        $("#MainCanvas div").draggable();
    });


    $(document).ready(function()
    {
        $("#MainCanvas").click(function()
        {
            $(this).children("div").css("border-style", "solid");
        });

        $("#MainCanvas div").live("mouseover", function()
        {
            $(this).css("border-color", "red");
        });

        $("#MainCanvas div").live("mouseout", function()
        {
            $(this).css("border-color", "black");
        });
        $("#MainCanvas div").live("mouseover", function()
        {
            $(this).draggable();
        });

        $("#MainCanvas div").live("click", function()
        {
            $("#MainCanvas div").css("border-style", "solid");
            $(this).css("border-style", "dashed");
            $(this).resizable();
        });

        $("#AddText").click(function()
        {
            var newDiv = $("<div></div");

            $(newDiv).html("New div");
            $("#MainCanvas").append(newDiv);
        });
    });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <div id="demo-frame">
        <div class="demo" id="MainCanvas">
            <div>
                <p>
                    Drag me around</p>
            </div>
        </div>

    </div><br /><input type="button" value="Add Text" id ="AddText" />

</asp:Content>

#演示帧
{
边框：1px实心#DDDDDD；
清楚:对,；
高度：300px；
溢出：隐藏；
宽度：520px；
}
#演示帧
{
填充物：5px；
}
#演示帧
{
宽度：100px；
高度：70像素；
背景色：透明；
边框：实心1px黑色；
光标：移动；
}
$（函数（）
{
$（“#MainCanvas div”）.draggable（）；
});
$（文档）.ready（函数（）
{
$（“#主画布”）。单击（函数（）
{
$（this.children（“div”）.css（“边框样式”、“实体”）；
});
$（“#MainCanvas div”）.live（“鼠标悬停”，函数（）
{
$（this.css（“边框颜色”、“红色”）；
});
$（“#MainCanvas div”）.live（“mouseout”，function（）
{
$（this.css（“边框颜色”、“黑色”）；
});
$（“#MainCanvas div”）.live（“鼠标悬停”，函数（）
{
$（this.draggable（）；
});
$（“#MainCanvas div”）.live（“单击”，函数（）
{
$（“#MainCanvas div”）.css（“边框样式”、“实体”）；
$（this.css（“边框样式”、“虚线”）；
$（this.resizeable（）；
});
$（“#添加文本”）。单击（函数（）
{
var newDiv=$（“您的代码中有一个错误

var newDiv = $("<div></div");
//should be
var newDiv = $("<div></div>");

var newDiv=$（“您的CSS和可调整大小的插件创建的元素存在冲突。
此位将匹配插件为句柄等添加的所有DIV。为容器DIV指定一个类，并将CSS应用于该类，使其与插件创建的元素不匹配

#demo-frame .demo div  
{  
    width: 100px;  
    height: 70px;  
    background-color:Transparent;  
    border:solid 1px black;  
    cursor:move;  
}

应该是这样的：

.container
{
    width: 100px;  
    height: 70px;  
    background-color:Transparent;  
    border:solid 1px black;  
    cursor:move;  
} 

将标记更改为：

<div id="demo-frame">       
    <div class="demo" id="MainCanvas">       
        <div class="container">       
            <p>Drag me around</p>       
        </div>       
    </div>
</div>
<br />
<input type="button" value="Add Text" id ="AddText" />


把我拖来拖去