JSFiddle - React, Tailwind, and code Playground

by rur_d

HTML

<script src="http://code.angularjs.org/angular-0.10.3.min.js" ng:autobind></script>
<div ng:controller="ListControl">
<ul ng:sortable="items" id="sortable">
    <li class="ui-state-default" ng:repeat="item in items"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{{item}}</li>
</ul>
</div>

CSS

#sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%;
}
#sortable li { 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em; 
    font-size: 1.4em; 
    height: 18px;
    background-color: #eeeeee; 
}
#sortable li span { 
    position: absolute; 
    margin-left: -1.3em; 
}

JavaScript

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

function ListControl(){
    this.items = ["Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5",
                "Item 6",
                "Item 7",
                "Item 8",
                "Item 9"]
}