jquery ui sortable test

by Jeremy Bolanos

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="demo">
    <div id="mod">
        <div id="e1" class="con"><div class="s">Item #1</div></div>
        <div id="e2" class="con"><div class="s">Item #2</div></div>
        <div id="e3" class="con"><div class="s">Item #3</div></div>
        <div id="e4" class="con"><div class="s">Item #4</div></div>
        <div id="e5" class="con"><div class="s">Item #5</div></div>
        <div id="e6" class="con"><div class="s">Item #6</div></div>
        <div id="e7" class="con"><div class="s">Item #7</div></div>
        <div id="e8" class="con"><div class="s">Item #8</div></div>
        <div id="e9" class="con"><div class="s">Item #9</div></div>
    </div>
</div>

CSS

div.con {
    display: block;
    width: 120px;
    font-size: 12px;
    cursor: pointer;
    line-height: 26px;
    padding: 0 5px;
    margin-bottom: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

JavaScript

$(function() {
    $('#demo #mod').sortable({
        change: function (event, ui) {
            // 
        }
    });
});