JSFiddle - React, Tailwind, and code Playground

by Tiago Crizanto

HTML

<div id="list1" class="sortlist">
    <div class="quote1">1</div>
    <div class="quote2">2</div>
    <div class="quote3">3</div>
    <div class="quote4">4</div>
    <div class="quote5">5</div>
</div>
<div id="list2" class="sortlist">
    <div class="quote1">1</div>
    <div class="quote2">2</div>
    <div class="quote3">3</div>
    <div class="quote4">4</div>
    <div class="quote5">5</div>
</div>

CSS

#list1{background:wheat;width:10%;}
#list2{background:lightgrey;width:10%;}

JavaScript

var lst, pre;

$(".sortlist").sortable({
    start:function(event, ui){
        pre = ui.item.index();
    },
    stop: function(event, ui) {
        lst = $(this).attr('id');
        post = ui.item.index();
        other = (lst == 'list1') ? 'list2' : 'list1';
        //Use insertBefore if moving UP, or insertAfter if moving DOWN
        if (post > pre) {
            $('#'+other+ ' div:eq(' +pre+ ')').insertAfter('#'+other+ ' div:eq(' +post+ ')');
        }else{
            $('#'+other+ ' div:eq(' +pre+ ')').insertBefore('#'+other+ ' div:eq(' +post+ ')');
        }
    }
}).disableSelection();