jquery UI Draggable with Resizable on the same element

I have some problem while using Jquery UI draggable with resizable on the same element, e.g a div element. when i apply both draggable and resizable on the same element, it produce a stack of 3 divs with one draggable and other 2 inside that dragglable div. i dont know whats wrong with it. I have tried to follow the instruction given on jqueryui.com, i failed to figure out whats wrong with my html. here is the code.

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

You have an error in your code

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

You've got a conflict with your CSS and the elements created by the resizeable plugin. This bit will match all of the DIVs added by the plugin for the handles, etc. Give the container DIV a class and apply the CSS to that class so that it doesn't match the elements created by the plugin

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

should be something like:

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

with the markup changed to:

<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" />