JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="resources/dragdrop.css"/>
    <!--[if lt IE 7]>
        <script defer='defer' type="text/javascript" src="/lib/js/pngfix.js"></script>
    <![endif]-->
    
    <link rel="stylesheet" type="text/css" href="./resources/main.css">
    <link rel="stylesheet" type="text/css" href="./resources/academy_general_final.css">
    
    <style type="text/css">
        div.thumbnail img {height: auto; width: 390px;}
        div.ballot-item .ui-state-highlight {margin-left:16px;}
        body {background-color: #fff !important;}
        #temp-holder {border: 1px solid black; width:400px; margin:20px;}
        #top {border: 1px solid green; width:400px; margin:20px;}
        #bottom {border: 1px solid red; width:400px; margin:20px;}
        #temp-holder div, #top div, #bottom div {height:20px; margin:5px;padding:5px;border:1px solid gray;}
        .top { background-color: #cd8;}
        .bottom { background-color: #a18;}
        .temp { background-color: #ef8;}
    </style>    
</head>
<body>
    <div id="temp-holder" class="connectedSortable ui-sortable">
        <div id="temp-holder-1" class="temp ui-state-default">Item 1</div>
        <div id="temp-holder-2" class="temp ui-state-default">Item 2</div>
        <div id="temp-holder-3" class="temp ui-state-default">Item 3</div>
        <div id="temp-holder-4" class="temp ui-state-default">Item 4</div>
        <div id="temp-holder-5" class="temp ui-state-default">Item 5</div>
    </div>
    <div id="top" class="connectedSortable ui-sortable">
        <div id="top-holder-1" class="top filler">1</div>
        <div id="top-holder-2" class="top filler">2</div>
        <div id="top-holder-3" class="top filler">3</div>
        <div id="top-holder-4" class="top filler">4</div>
        <div id="top-holder-5" class="top filler">5</div>

    </div>
</body>
</html>

JavaScript

jQuery(document).ready(function ($) {
    $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
        _rearrange: function(event, i, a, hardRefresh) {
            if(a) {
                a[0].appendChild(this.placeholder[0]);
            }
            else {
                if($(i.item[0]).hasClass('filler')) {
                    console.log("overlapping with filler");
                    // We have an item that was deleted before and the place holder is in the current list
                    if(this.lastDeletedItem && (this.placeholder[0].parentNode == i.item[0].parentNode)) {
                    
                            console.log("lastDeletedItem exists, placeholder and filler in same list");
                        i.item[0].parentNode.replaceChild(this.lastDeletedItem.item[0], this.placeholder[0]);
                    }
                    else if(this.lastDeletedItem && (this.placeholder[0].parentNode == this.lastParentNode)) {
                        console.log("lastDeletedItem exists, placeholder and filler in different list");
                        this.lastParentNode.replaceChild(this.lastDeletedItem.item[0], this.placeholder[0]);
                    }
                    else {
                        console.log("none of these, special case");
                        console.log(this);
                        console.log(this.lastDeletedItem);
                        console.log(this.placeholder[0].parentNode)
                        console.log(i.item[0].parentNode)
                    }
                    this.lastDeletedItem  = i;
                    this.lastParentNode = i.item[0].parentNode;    
                    i.item[0].parentNode.replaceChild(this.placeholder[0], i.item[0]);
                }
                else {
                    console.log("an actual selection, need to modify the list accordingly");
                    if(this.lastDeletedItem && (this.placeholder[0].parentNode == i.item[0].parentNode)) {
      ...