JSFiddle - React, Tailwind, and code Playground

by nabeezy

HTML

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default"><span class="buttonUp">UP</span> | <span class="buttonDown">DN</span> Item 1</li>
    <li class="ui-state-default"><span class="buttonUp">UP</span> | <span class="buttonDown">DN</span> Item 2</li>
    <li class="ui-state-default"><span class="buttonUp">UP</span> | <span class="buttonDown">DN</span> Item 3</li>
    <li class="ui-state-default"><span class="buttonUp">UP</span> | <span class="buttonDown">DN</span> Item 4</li>
    <li class="ui-state-default"><span class="buttonUp">UP</span> | <span class="buttonDown">DN</span> Item 5</li>
</ul>
 
<p id="testClickSort1">testClickSort1</p>

CSS

#sortable1 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sortable1 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; height: 30px;}
#sortable1 li {border: 1px solid red}
#sortable2 li {border: 1px solid blue}
.buttonUp{ background-color:#ff0000}
.buttonDown{ background-color:#00ff00}

JavaScript

$(function() {
    $("#sortable1").sortable().disableSelection();
    $("#sortable1 li").live('click',function(){
            $("#testClickSort1").html($(this).html());            
    });
    $(".buttonUp").live("click", function(){up(this)});
    $(".buttonDown").live("click", function(){alert("down")});
    
    function up(eventObject){ 
            var curr = $(this).parent(); 
            var prev = $(curr).prev(); 
    alert(curr.text);
            // swap 
            $(prev).insertAfter(curr); 
    } 
    
    function down(eventObject){ 
            var curr = $(this).parent().attr('id'); 
            var next = $("#"+curr).next().attr('id'); 
    
            // Swap 
            $("#"+next).insertBefore("#"+curr); 
    } 
});



/*
function up(eventObject){ 
        var curr = $(this).parent().attr('id'); 
        var prev = $("#"+curr).prev().attr('id'); 

        // swap 
        $("#"+prev).insertAfter("#"+curr); 
} 

function down(eventObject){ 
        var curr = $(this).parent().attr('id'); 
        var next = $("#"+curr).next().attr('id'); 

        // Swap 
        $("#"+next).insertBefore("#"+curr); 
} 
*/