JSFiddle - React, Tailwind, and code Playground

by cuhuak

HTML

<div class="FieldContainer">
	<div class="OrderingField">
		<div class="LeftFloat">
			Item1
		</div>
		<div class="RightFloat Commands">
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		</div>
	</div>
	<div class="OrderingField">
		<div class="LeftFloat">
			Item2
		</div>
		<div class="RightFloat Commands">
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		</div>
	</div>
	<div class="OrderingField">
		<div class="LeftFloat">
			Item3
		</div>
		<div class="RightFloat Commands">
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		</div>
	</div>
	<div class="OrderingField">
		<div class="LeftFloat">
			Item4
		</div>
		<div class="RightFloat Commands">
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		</div>
	</div>
	<div class="OrderingField">
		<div class="LeftFloat">
			Item5
		</div>
		<div class="RightFloat Commands">
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		</div>
	</div>
	<div class="OrderingField">
		<div class="LeftFloat">
			Item6
		</div>
		<div class="RightFloat Commands">
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		</div>
	</div>
</div>

CSS

.LeftFloat
{
    float: left
}
.RightFloat
{
    float: right
}

.FieldContainer
{
    border: 1px solid black;
    width: 400px;
    height: 300px;
    overflow-y: auto;
    font-family:tahoma;
}
 .OrderingField
{
    margin: 3px;
    border: 1px dashed #0da3fd;
    background-color: #e8efff;
    height: 50px;
}
.OrderingField div.Commands
{
    width: 60px;
}
button
{
    width: 60px;
}

JavaScript

function moveUp(item) {
    var prev = item.prev();
    if (prev.length == 0)
        return;
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);
    });
}
function moveDown(item) {
    var next = item.next();
    if (next.length == 0)
        return;
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
        next.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertAfter(next);
    });
}

$(".FieldContainer").sortable({ items: ".OrderingField", distance: 10 });
$('button').click(function() { 
    var btn = $(this);
    var val = btn.val();
    if (val == 'up')
        moveUp(btn.parents('.OrderingField'));
    else
        moveDown(btn.parents('.OrderingField'));
});