span position problem after being insert in div

span position problem after being insert in div

Hi all,

i am new to jquery and jquery-ui. i try to make a drag and drop feature using jquery ui. but i find that after inserting a span element to a div, the position of the inserted span element cannot be wrapped within the dropArea div.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/black-tie/jquery-ui-1.8.4.custom.css" />
        <style type="text/css">      
            .dragArea {
                background-color: Blue;
                opacity: 0.5;
                width: 300px;
                height: 100px;
                padding-top:10px;
                padding-bottom:10px;
                padding-right:10px;
                padding-left:10px;
            }
           
            .dropArea {
                background-color: Red;
                opacity: 0.5;
                width: 300px;
                height: 300px;
                padding-top:10px;
                padding-bottom:10px;
                padding-right:10px;
                padding-left:10px;
            }
           
            .drag {
                width: 20px;
                height: 40px;
                border-style:solid;
                border-color:green;
                margin-top:10px;
                margin-bottom:10px;
                margin-right:10px;
                margin-left:10px;
                cursor: move;
            }
           
            .drop {
                width: 20px;
                height: 40px;
                border-style:solid;
                border-color:green;
                margin-top:10px;
                margin-bottom:10px;
                margin-right:10px;
                margin-left:10px;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SeeWee Drag and Drop</title>
    </head>
    <body>
        <div id="dragArea1" class="dragArea">
            <span id="d1" class="drag">123</span>
            <span id="d2" class="drag">456</span>
            <span id="d3" class="drag">789</span>
            <span id="d4" class="drag">123</span>
            <span id="d5" class="drag">456</span>
            <span id="d6" class="drag">789</span>
            <span id="d7" class="drag">123</span>
            <span id="d8" class="drag">456</span>
            <span id="d9" class="drag">789</span>
            <span id="d10" class="drag">123</span>
            <span id="d11" class="drag">456</span>
            <span id="d12" class="drag">789</span>
            <span id="d13" class="drag">123</span>
            <span id="d14" class="drag">456</span>
            <span id="d15" class="drag">789</span>
        </div>
       
        <div id="dropArea1" class="dropArea">
            <span id="d16" class="drop">321</span>
            <span id="d17" class="drop">654</span>
            <span id="d18" class="drop">987</span>
            <span id="d19" class="drop">321</span>
            <span id="d20" class="drop">654</span>
            <span id="d21" class="drop">987</span>
            <span id="d22" class="drop">321</span>
        </div>
       
       
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var dragOpts = {
                    revert: true,
                    revertDuration: 1000
                };
                $(".drag").draggable(dragOpts);           
               
                var dropOpts = {
                    accept: ".drag",
                    drop: moveSpan
                }
               
                $(".dropArea").droppable(dropOpts);
               
                function moveSpan(e, ui) {
                    ui.draggable.remove();
                    $(document.createElement("span")).addClass("drop").attr("id", ui.draggable.attr("id")).text(ui.draggable.text()).appendTo("#dropArea1");
                }
            });

        </script>
    </body>
</html>

i wonder if my problem is related to the css attributes.

Thanks

Regards,
Kit