JSFiddle - React, Tailwind, and code Playground

by tibum

HTML

<div id='source'>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
</div>

<input id='toggle' type='button' value='toggle'/>

<div id='panel'>
    <div id='content'>
        <div id='target'></div>        
    </div>
</div>

CSS

#source div { background-color: blue; margin: 3px; }
#panel { border: 1px solid black; background-color: #eee; padding: 10px;}
#content { background-color: red; }
#target { min-height: 20px; background-color: white; }

JavaScript

$('#toggle').click(function(){
    $('#content').toggle();
});
    
$('#target').sortable();
$('#source div').draggable({
    connectToSortable: '#target',
    helper: 'clone'
});