JSFiddle - React, Tailwind, and code Playground

by MatyasSvejdik

HTML

<div class="source">
        <div class="item" value="4.5" code="o45">O4.5<span class="closer">O4.5</span></div>
        <div class="item" value="5.0" code="o50">O5.0<span class="closer">O5.0</span></div>
        <div class="item" value="5.5" code="o55">O5.5<span class="closer">O5.5</span></div>
        <div class="item" value="6.0" code="o60">O6.0<span class="closer">O6.0</span></div>
        
        <div class="item" value="2" code="s20">S2.0<span class="closer">S2.0</span></div>
        
        <div class="item" value="1" code="b10">B1.0<span class="closer">B1.0</span></div>
        
        
        <div class="item" value="1.5" code="b15">B1.5<span class="closer">B1.5</span></div>
        
        <div class="item" value="2.0" code="r20">R2.0<span class="closer">R2.0</span></div>
        <div class="item" value="2.5" code="r25">R2.5<span class="closer">R2.5</span></div>
        <div class="item" value="3.0" code="r30">R3.0<span class="closer">R3.0</span></div>

        <div class="item" value="2.5" code="m25">M2.5<span class="closer">M2.5</span></div>
        <div class="item" value="3.0" code="m30">M3.0<span class="closer">M3.0</span></div>
        <div class="item" value="3.5" code="m35">M3.5<span class="closer">M3.5</span></div>
        <div class="item" value="4.0" code="m40">M4.0<span class="closer">M4.0</span></div>

      </div>

CSS

body { background: #aaafd7; }

.row:after {
  content: "";
  display: table;
  clear: both;
}

.source, .target1, .target2, .buttonX {float: left;  width: 75px}



.item { height:30px; margin: 5px; color: #ffffff; background-color: #0a0f37; position: relative;text-align: center; border-radius:15px;cursor: pointer; line-height:28px}

.item .closer { height:30px; color: #ffffff; background-color: #0a0f37; position: relative;text-align: center; border-radius:15px;cursor: pointer;  display: none;}

.item .closer:hover { background-color: #ff0000; }

.empty { height: 30px; margin: 5px; background: #ebebf5; border-radius:15px;}
.empty .item { margin: 0; }
.empty .item .closer { display: block; bottom: 28px;}

.highlight { background: #fff; }
.highlight .item { opacity: 0.3; }
.ui-draggable-dragging { z-index: 99; opacity: 1 !important; }

.button { height:20px; margin:5px; padding:5px; color: #ffffff; background-color: #46cd8c; position: relative;text-align: center; border-radius:15px;cursor: pointer;}

JavaScript

$(".source .item").draggable({
  revert: "invalid",
  appendTo: 'body',
  helper: 'clone',
  start: function(ev, ui) {
    ui.helper.width($(this).width());
  } // ensure helper width
});