JSFiddle - React, Tailwind, and code Playground

by corinnekm

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/sortable//resources/demos/style.css">
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<ul data-bind="foreach: task" 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>
</ul>

CSS

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

JavaScript

var data = {
    "menu": [{
        "caption": "item1",
            "order": 1
    }, {
        "caption": "item2",
            "order": 2
    }, {
        "caption": "item3",
            "order": 3
    }]
};
var viewModel = ko.mapping.fromJS(data);

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