JSFiddle - React, Tailwind, and code Playground

by FabienDemangeat

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

CSS

li {
    height: 50px;
    border: 1px solid #666;
    background: white;
    text-align: center;
    line-height: 50px;
    vertical-align: middle;
    font-weight: bold;
    font-size: 20pt;
    color: #F50;
}

li:nth-child(odd) { 
    background:#CCC;
}

JavaScript

$(function() {
    
    // Duration for every swaps
    var DURATION = 400;

    // The Jquery transition
    // Import JQuery UI to get all the transition       
    var JQUERYUI_EASING = "easeInQuart";
    
    // The index of the li element moved (zero-based)
    var START_INDEX = 1;
    
    // The index of destination for the element (zero-based and before the swap)
    var DESTINATION_INDEX = 5;
    
    // Call which starts the demo
    votingAnimation(START_INDEX, DESTINATION_INDEX);
    
    
    // ############## The functions ############
    
    // Convenient function to call the recursive one
    function votingAnimation(startIndex, destinationIndex) {
        // The number of swaps done so far
        var numberOfSwapsDone = 0;
        var numberOfSwapsToDo = 0;
        
        // Determine the number of swaps to do
        if(startIndex < destinationIndex)
            numberOfSwapsToDo = destinationIndex - startIndex;
        else
            numberOfSwapsToDo = startIndex - destinationIndex;
        
        // Let's start
        doSwaping(numberOfSwapsDone, numberOfSwapsToDo, startIndex, destinationIndex);
    }
    
    // The actual function which gets the job done
    function doSwaping(numberOfSwapsDone, numberOfSwapsToDo, startIndex, destinationIndex) {
        
        console.debug(">>>> Do swaping");
        
        // The li elements of the list
        // Do it within the function so it's refreshed for every call
        var $liElements = $("ul").children();
        
        // Check if we try to push up or down an item
        var isPushingDown = startIndex < destinationIndex;
        
        // Index of the top and botto li
        var northLiIndex = startIndex + numberOfSwapsDone;
        var southLiIndex = startIndex + numberOfSwapsDone + 1;
        if(! isPushingDown) { // Pushing up
            northLiIndex = startIndex - numberOfSwapsDone - 1;
            southLiIndex = startIndex - numberOfSwapsDone;
        }
        
    ...