JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<div class="size1">
         <div class="widget">content1</div>
    </div>
    
    <div class="size2">
         <div class="widget">content2</div>
    </div>
    
    <div class="size1">
         <div class="widget">content3</div>
    </div>
    
    <div class="size2">
         <div class="widget">content4</div>
    </div>
    
    <div class="size1">
         <div class="widget">content5</div>
    </div>

CSS

.widget {background: red; position: relative; heigth: 20px; width: 100px; margin: 20px; }

.size1 .widget {background: lightgreen; cursor: pointer;}


.ui-state-highlight {position: relative; heigth: 20px; width: 100px; margin: 20px; background: rgba(120,56,200,0.1);}

JavaScript

$(function() {
    //$( ".widget").draggable();
    $( ".size1" ).sortable({
        connectWith: ".size1",
        axis: 'y',
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true,
        tolerance: 'pointer',
        deactivate: function(event, ui) {
            $(ui.item).siblings().appendTo(ui.sender);
        }
    });
});