Position problem with draggable

Position problem with draggable


I am brand-new to jQuery (though I am an experienced programmer)
I have a sample page whose behavior I'm not understanding (see the
code that follows this post)
You will need jquery & jquery-ui in the same directory. When you
double-click the div 'center', a new div will be created at the double-
click point. This works fine. However, if you uncomment the .draggable
() line in addDiv the new div will be created at some offset from the
double-click point.
Can anyone give me insight into what's going on in jQuery-ui that
causes this offset and how I might fix it?
Thank you
--- EXAMPLE.HTML ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<style type="text/css">
    #center {
        height: 400px;
        width: 400px;
        border: 1px black solid;
        position: relative;
        cursor: default;
    }
    .box {
        border: 1px black solid;
        height: 100px;
        width: 100px;
        position: absolute;
    }
</style>
</head>
<body>
<div id="center">
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#center").dblclick(function(e) {
            addDiv(e.pageX, e.pageY);
        });
    });
    function addDiv(x,y)
    {
        var container = $("#center").position();
        $("<div class='box'></div>")
            .css("left",x-container.left).css("top",y-container.top)
            //.draggable()
            .appendTo("#center");
    }
</script>
</body>
</html>