JSFiddle - React, Tailwind, and code Playground

by tunafish

HTML

<ul id="palette" class="ui-sortable">
    <li class="used">A</li>
    <li>B</li>
    <li class="used">C</li>
    <li class="used">D</li>
    <li>E</li>
    <li>F</li>
</ul>

<ol id="box1" class="ui-sortable box">
    <li>A</li>
    <li>D</li>
 </ol>

<ol id="box2" class="ui-sortable box"></ol>

<ol id="box3" class="ui-sortable box">
    <li>C</li>
</ol>

<br class="break"/>

CSS

* { margin: 0; padding: 0; }

ul, ol { list-style: none; }

#palette {
   display: block;
   float: left;
   clear: none;
   width: 114px;
   margin: 5px;
   background: yellow;
}

.box {
   display:block;
   float: left; 
   clear: none;
   width: 114px;
   min-height: 5em;
   margin: 5px;
   background: silver;
}

.box li, #palette li {
   display: block;
   float: left; 
   clear: none;
   width: 32px;
   height: 32px;
   margin: 2px;
   text-align: center;
   border: solid 1px black;
}

#palette li { font-weight: bold; }
#palette li.used { font-weight: normal; }

#palette .ui-sortable-placeholder { display:none; }

JavaScript

$j = jQuery.noConflict();

$j(document).ready(init);

function init() {
   var SortParams = { 
       connectWith: '.box,#palette', 
       dropOnEmpty: true,
       receive: doPaletteMagic
   }
   $j('.box,#palette').sortable(SortParams);
 }

function doPaletteMagic(event, ui) {
    if (ui.sender.is('#palette')) {
        ui.item.clone().addClass('used').appendTo('#palette');
        // TODO: fix #palette ordering
    } else {
        if (ui.item.parent().is('#palette')) {
            var ItemContent = ui.item.text();
            ui.item.remove();
            if (!isUsed(ItemContent)) {
                $j('#palette li:contains(' + ItemContent + ')').removeClass('used');
            }
        }
    }
}

function isUsed(Content) {
    return ($j('.box li:contains('+Content+')').length > 0);
}