problem with Drag & Drop and Dialog

problem with Drag & Drop and Dialog


I am trying to drag a div, and drop it onto a div within a Dialog.
It works fine when the div is not within the Dialog, but not when it's
surrounded by the Dialog.
I am brand new to jQuery, and have searched for a solution but can not
find one.
Here is my simple test code:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
    <link type="text/css" href="js/theme/ui.all.css" rel="Stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui-
personalized-1.6rc6.js"></script>
    <script type="text/javascript">
        $(function(){
            // Dialog
            $('#dialog').dialog({
                autoOpen: true,
                width: 400,
                height: 500,
                position: [20, 200]
            });
            $('#dragme').draggable({
                revert: true,
                zIndex: 9999
            });
            $('.droponme').droppable({
         accept: "#dragme",
         hoverClass: "drop-active",
                drop:function(ev,ui){
                    alert("DROPPED");
                }
            });
});
    </script>
    <style>
    .drop-active { border: solid 3px red }
    </style>
</head>
<body>
<div id="dragme">HI</div>
<div class="droponme">PLACE HERE WORKS</div>
<div id="dialog">
<div class="droponme">PLACE HERE DOES NOT WORK</div>
</div>
</body>
</html>