jQury UI Sortable

by Nibin George

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div id="sortable"></div>
<input type='button' id='btn' value='add' />

CSS

#sortable {
    width: 300px;
    border:1px solid black;
    height:350px;
}
#sortable div {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    height: 18px;
}
/*#sortable li span {  }*/
 .d {
    background-color:yellow;
    border:1px solid orange;
    height:20px;
}

JavaScript

var c = 1;
$("#btn").click(function () {

    var d = $("<div/>");
    d.html(c++);
    d.addClass('d');
    $("#sortable").append(d);

});
$( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();