JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="container">
    <div class="smallitems">
        
        <div class="dragimage">
            <a href="#select1" class="lablecircle active">1</a>
        </div>
         <div class="dragimage">
            <a href="#select1" class="lablecircle">2</a>
        </div>
         <div class="dragimage">
            <a href="#select3" class="lablecircle">3</a>
        </div>
         <div class="dragimage">
            <a href="#select4" class="lablecircle">4</a>
        </div>
         <div class="dragimage">
            <a href="#select5" class="lablecircle">5</a>
        </div>
         <div class="dragimage">
            <a href="#select1" class="lablecircle">6</a>
        </div>
         <div class="dragimage">
            <a href="#select7" class="lablecircle">7</a>
        </div>
        <div class="dragimage">
            <a href="#select8" class="lablecircle">8</a>
        </div>
    </div>    
    <div class="items">
        <div class="item"><span class="lablecircle" id="select1">1</span></div>
        <div class="item"><span class="lablecircle" id="select2">2</span></div>
        <div class="item"><span class="lablecircle" id="select3">3</span></div>
        <div class="item"><span class="lablecircle" id="select4">4</span></div>
        <div class="item"><span class="lablecircle" id="select5">5</span></div>
        <div class="item"><span class="lablecircle" id="select6">6</span></div>
        <div class="item"><span class="lablecircle" id="select7">7</span></div>
        <div class="item"><span class="lablecircle" id="select8">8</span></div>
    </div>
</div>

CSS

.container{
    width:1000px;
}
.smallitems{
    border:1px solid red;
    width:300px;
    float:left;
    height:400px;
    margin-right:15px;
}
.items {
    white-space: nowrap;
    width: 600px;
    border:1px solid green;
    overflow-y:scroll;
    float:left;
}
.item {
    width: 200px;
    height: 400px;
    border: 1px solid red;
    display: inline-block;
    background-color:#ddd;
    font-size:30pt;
    text-align:center;
    line-height:400px;
    cursor:move;
}
.nextbutton,.prevbutton{
    border:1px solid red;
    padding:20px;
    color:red;
    background-color:green;
    display:inline-block;
}
.dragimage{
	border: 1px solid red;
	float: left;
	margin: 6px;
	width: 40%;
	padding:3px;
	height:80px;
    line-height:80px;
	cursor:move;
	position:relative;
    text-align:center;
    font-size:20pt;
}

JavaScript

var oldIndex, newIndex;
$('.smallitems').sortable({
    start: function(e,ui){
        oldIndex = ui.item.index();
    },
    stop: function(e,ui){
        newIndex = ui.item.index();
        var largeItems = $('.items').children();
        if(newIndex > oldIndex)
            largeItems.eq(newIndex).after(largeItems[oldIndex]);
        else largeItems.eq(newIndex).before(largeItems[oldIndex]);
    }
});