JSFiddle - React, Tailwind, and code Playground

by auzz

HTML

<script src="https://github.com/Auz/FancySortable/raw/master/Source/FancySortable.js"></script>
<div id='listwrap'>

    <div class='listitem'><div class='handle'></div><span class='num'>1</span>The Shawshank Redemption (1994)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>2</span>The Godfather (1972)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>3</span>The Godfather: Part II (1974)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>4</span>The Good, the Bad and the Ugly (1966)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>5</span>Pulp Fiction (1994)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>6</span>12 Angry Men (1957)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>7</span>Schindler's List (1993)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>8</span>One Flew Over the Cuckoo's Nest (1975)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>9</span>Inception (2010)</div>
    <div class='listitem'><div class='handle'></div><span class='num'>10</span>The Dark Knight (2008)</div>
   
</div>

CSS

#listwrap {
    border: 1px solid #ddd;
}
.listitem {
    height: 30px;
    line-height: 30px;
    clear:both;
    overflow:hidden;
    border-bottom: 1px solid #ddd;
    background-color: #fbfbf7;
}
.listitem .num {
    color: #777;
    padding-right: 10px;
}
.listitem:hover {
    background-color: #f6f6ec;
}
.listitem.dragging {
    background-color: #d3ebfc;
}
.listitem .handle {
    cursor: pointer;
    width: 20px;
    height: 30px;
    float:left;
}
.listitem .handle:hover {
    background-color: green;
}
.between-item.open {
    border-bottom: 1px solid #ddd;
}
.between-item {
    opacity: .6;
    background: transparent url(http://d0wn.net/rightarrow.gif) no-repeat 5px 50%;
}

JavaScript

var f = new FancySortable('listwrap', '.listitem', {
    'expandHeight':25,
    'onSort': function(list, item, i, ind) {
        list.each(function(el, x){
            el.getElement('.num').set('text', x+1);
        });
    }
});