Sortable Drag Drop Grid problem while sorting

Sortable Drag Drop Grid problem while sorting

Hi All

I am fairly new to using JQuery, I have a simple 3x3 grid of draggable items these items are organised into a sortable list and floated left to give me my grid. the drag and drop and sorting is working fine. The problem I have is while JQuery is doing this some of my drag "elements" fly out of my container making everything look messy. I have included a simplification of my code below, I hope someone can help resolve this issue. Thanks in advance

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- Jquery links -->
    <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function(){
            $(".targetList").sortable({
                placeholder : 'highlight'
            });
            $(".targetList").disableSelection();
            $('.draggable').draggable({connectToSortable : ul.targetList});
            $('.target').droppable();
        });
    </script>
    <!-- CSS Styles -->
    <style type="text/css">
    /* layout */
    * {
        margin:0;
        padding:0;
    }
    #container {
        margin:0 auto;
        width:600px;
        height:300px;
        border: solid red 1px;
    }

    /* look and feel */
    .targetBorder {
        border:dotted #ccc 1px;
    }
    .draggable{
        width:200px;
        height:100px;
    }
    .header {
        color:#fff;
        background-color:#000;
    }
    #container ul li {
        list-style:none;
        float:left;
    }
    .highlight {
        width:200px;
        height:100px;
        border:dotted #ccc 1px;
    }
    </style>
    </head>
    <body>
    <div id="container" >
        <ul class="targetList">
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 1</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 2</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 3</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 4</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 5</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 6</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 7</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 8</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="draggable">
                    <div class="header">
                        <h2>Header 9</h2>
                    </div>
                    <div class="content">
                        <p>This is the content of the container</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </body>