JSFiddle - React, Tailwind, and code Playground

by Zacc206

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

<br />

<div id="btn-container">
    <button id="btn0">Move Li</button>
    <button id="btn1">Move Column 1 Right</button>
    <button id="btn2">Move Column 1 Left</button>
</div>
    
<br />
<br />

<div class="row">
	<div class="container columns col1">Column Text 1</div>
	<div class="container columns col2">Column Text 2</div>
	<div class="container columns col3">Column Text 3</div>
	<div class="container columns col4">Column Text 4</div>
</div>

<div class="row">
	<div class="container columns col1">Column Text 1</div>
	<div class="container columns col2">Column Text 2</div>
	<div class="container columns col3">Column Text 3</div>
	<div class="container columns col4">Column Text 4</div>
</div>

<div class="row">
	<div class="container columns col1">Column Text 1</div>
	<div class="container columns col2">Column Text 2</div>
	<div class="container columns col3">Column Text 3</div>
	<div class="container columns col4">Column Text 4</div>
</div>

<div class="row">
	<div class="container columns col1">Column Text 1</div>
	<div class="container columns col2">Column Text 2</div>
	<div class="container columns col3">Column Text 3</div>
	<div class="container columns col4">Column Text 4</div>
</div>

<div class="row">
	<div class="container columns col1">Column Text 1</div>
	<div class="container columns col2">Column Text 2</div>
	<div class="container columns col3">Column Text 3</div>
	<div class="container columns col4">Column Text 4</div>
</div>

<div class="row">
	<div class="container columns col1">Column Text 1</div>
	<div class="container columns col2">Column Text 2</div>
	<div class="container columns col3">Column Text 3</div>
	<div class="container columns col4">Column Text 4</div>
</div>

<div class="row">
	<div class="container columns col1">Column Text 1</div>
	<div class="container columns col2">Column Text 2</div>
	<div class="container columns col3">Column Text...

CSS

body{padding: 20px;}
button{display: block; padding: 10px 5px; width: 200px; margin: 10px 0; }
.row{padding: 15px; outline: 1px solid red;}
.container{width: 100px; outline: 1px solid #000; display: inline-block;}
#btn-container{position: fixed; top: auto;}

JavaScript

/**
 * @param subjectIndex {int} Index of the item to be moved
 * @param objectIndex {int} Index of the item to move subject after
 * @param siblings {jQuery} List of sibling elements to act upon
 */
var swapElementsRight = function(siblings, subjectIndex, objectIndex) {
    // Get subject jQuery
    var subject = $(siblings.get(subjectIndex));
    // Get object element
    var object = siblings.get(objectIndex);
    // Insert subject after object
    subject.insertAfter(object);
}

var swapElementsLeft = function(siblings, subjectIndex, objectIndex) {
    // Get subject jQuery
    var subject = $(siblings.get(subjectIndex));
    // Get object element
    var object = siblings.get(objectIndex);
    // Insert subject after object
    subject.insertBefore(object);
}

$(function() {
    //swapElements($('li'), 0, 1);
    //swapElements($('div.columns'), 0, 1);
    //alert('test');
});

$(document).ready(function(){
    $('#btn1').click(function(){
        $('.row').each(function(){
            var rowCells = $(this).find('.container');
            swapElementsRight(rowCells, 0, 1);
        });
    });
       
    $('#btn2').click(function(){
        $('.row').each(function(){
            var rowCells = $(this).find('.container');
            swapElementsLeft(rowCells, 1, 0);
        });
    });
});


$('#btn1').click(function(){
    //swapElements($('div.columns'), 0, 1);
    alert('alert');
});

$('#btn0').click(function(){
    swapElements($('li'), 0, 1);
});