jQuery UI Current

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>


  <div id="templatemenu">
    <ul id="templatecontainer">
        <li id="external" class="room ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">New Room</h3>             
                <ul class="roomcontent">
                    <li class="reinigung">bla</li>
                    <li class="reinigung">bla</li>
                </ul>
        </li>
    </ul>
</div>    

<div id="arbeitsplan">
    <ul id="monday" class="dayList">Monday
        <li id="room1" class="room ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">Room1</h3>
                <ul class="roomcontent">                    <li class="reinigung">bla</li>
                    <li class="reinigung">bla</li>

                </ul>
        </li>        <li id="room1" class="room ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">Room1</h3>
                <ul class="roomcontent">                    <li class="reinigung">bla</li>
                    <li class="reinigung">bla</li>

                </ul>
        </li>        <li id="room1" class="room ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">Room1</h3>
                <ul class="roomcontent">                    <li class="reinigung">bla</li>
                    <li class="reinigung">bla</li>

                </ul>
        </li>        <li id="room1" class="room ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">Room1</h3>
                <ul class="roomcontent">                    <li class="reinigung">bla</li>
                    <li class="reinigung">bla</li>

                </ul>
        </li>        <li id="room1" class="room...

CSS

body{
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; 
    font-size: 1.1em;  
}
ul{ list-style-type: none; margin: 0; padding: 0;}
    
#templatemenu{
    float: left; 
    position:fixed; /* Comment this out and everything looks right */
    top:150px;
}
.ui-sortable-placeholder { 
    border: 1px dotted black; 
    visibility: visible !important; 
    height: 50px !important;
}
.ui-sortable-placeholder * { 
    visibility: hidden; 
}
    
#arbeitsplan{
    float: right;
}
#templateContainer { 
    list-style-type: none; 
    top: 0px; 
}
#external{ 
    width: 130px; 
    height: 50px; 
    padding: 0.3em; 
    font-size: 11px; 
    margin: 3px;
}
    
ul.dayList { 
    list-style-type: none; 
    margin: 0; 
    padding: 3px; 
    float: left; 
    margin-right: 10px; 
    width: 140px; 
    background-color: #f6f6f6; 
    min-height: 100px;
}

li.room{ 
    width: 130px; 
    height: auto; 
    padding: 2px; 
    position: relative; 
    font-size: 11px; 
    margin: 3px; 
    overflow: visible; 
    height: auto;
}
.room h3 { 
    margin: 0; 
    padding: 0.2em; 
    text-align: center;
}
.roomcontent{ 
    margin: 5px; 
}

JavaScript

$("#external").draggable({
    connectToSortable: "#monday",
    helper: "clone",
    addClasses: false
}).disableSelection();

$("#monday").sortable({
    addClasses: false,
    opacity: 0.5,
    connectWith: '#monday'
}).disableSelection();