JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<ul>
    <li style="background-color: #f00;">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />1
    </li>
    <li style="background-color: #0f0;">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />2
    </li>
    <li style="background-color: #00f;">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />3
    </li>
    <li style="background-color: #ff0;">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />4
    </li>
    <li style="background-color: #0ff;">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />5
    </li>
    <li style="background-color: #f0f;">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />6
    </li>
    <li style="background-color: #666;">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />7
    </li>

</ul>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul { list-style-type: none; margin: 0px; padding: 0px; }
li { height: 60px; width: 60px; float: left; margin: 5px; border: 1px solid #ccc; text-align: center;}
button {
    width: 20px; height: 20px;
    font-size: 12px; line-height: 20px;
    margin: 0px; padding: 0px;
}

JavaScript

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    this.after(other.clone());
    other.after(this).remove();
};

$('ul').on('click','.doleft',function(){
    console.log('left - index: '+$(this).parent().index());
    if ($(this).parent().index() > 0) {
        $(this).parent().exchangePositionWith( $(this).parent().prev() );
    }
});

$('ul').on('click','.doright',function(){
    console.log('right - index: '+$(this).parent().index());
    if ($(this).parent().index() < $('li').length-1) {
        $(this).parent().exchangePositionWith( $(this).parent().next() );
    }
});