JSFiddle - React, Tailwind, and code Playground

by omnosis

HTML

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://pastebin.com/raw.php?i=Ba8UzsDi"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />
</head>
<body>
    <ul id="sortable1">
        <li>oranges</li>
        <li class="static">apples</li>
        <li>bananas</li>
        <li>pineapples</li>
        <li>grapes</li>
        <li class="static">pears</li>
        <li>mango</li>
    </ul>
    
    <ul id="sortable2">
        <li>bananas</li>
        <li foo="asd">oranges</li>
        <li foo="dsa">apples</li>
        <li>pineapples</li>
        <li>grapes</li>
        <li>pears</li>
        <li>mango</li>
    </ul>
    
    <ul id="sortable3">
        <li>bananas</li>
        <li>oranges</li>
        <li>apples</li>
        <li>pineapples</li>
        <li>grapes</li>
        <li>pears</li>
        <li>mango</li>
    </ul>
</body>

CSS

ul {margin:10px;}
ul#sortable1 > li, ul#sortable2 > li, ul#sortable3 > li {
    display:block;
    width:100px;
    height:15px;
    padding: 3px;
    background: #aaa;
    border: 1px solid #777;
    margin: 1px;
}
ul#sortable1 > li.static {
    opacity:0.5;
}

JavaScript

$(function() {
    $("#sortable1").sortable({
        fixed: "> .static"
    });
    
    $("#sortable2").sortable({
        fixed: $("li[foo]").css("background","red")
    });
    
    $("#sortable3").sortable({
        fixed: [3,5]
    })
});