jQuery Draggable Sortable Problem

by bennyticklez

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="composer">
    <ul>
        <li id="draggable" class="ui-state-highlight">Drag me into list and then back here</li>
    </ul>
</div>
<div class="all-content-holder">
    <div class="all-content-background">
        <div class="all-content">
            <ul id="sortable">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
                <li class="ui-state-default">Item 3</li>
                <li class="ui-state-default">Item 4</li>
                <li class="ui-state-default">Item 5</li>
            </ul>
        </div>
    </div>
</div>

CSS

ul {
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    margin-bottom: 10px;
	}
	li {
	    margin: 5px;
	    padding: 5px;
	    width: 150px;
	}
	.composer {
	    width:300px;
	    background-color:#ccc;
	    position: fixed;
	    top: 36px;
	    bottom: 0;
	    z-index: 9999999;
	    font-size:11px;
	    line-height: normal;
	}
	.all-content-holder {
	    height: 100%;
	    margin-left: 300px;
	    margin-top: 36px;
	    right: 0;
	    bottom: 0;
	    overflow: auto;
	    min-height: 100%;
	}
	.all-content-background {
	    margin: 0;
	    overflow-x: visible;
	    position: static;
	    width: 100%;
	    max-width: 100%;
	}
	.all-content {
	    position: relative;
	    width: 100%;
	    z-index: 1;
	}

JavaScript

$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});

$("#sortable").sortable({
    revert: true
});

$("ul, li").disableSelection();