JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jnbdz/Drag.Move.Inside/master/Source/Drag.Move.Inside.js"></script>
<script src="https://raw.github.com/jnbdz/elInside/master/Source/Element.inside.js"></script>
<section id="main" role="main">
    <section id="inside">
        <header>
            <h1>Drag.Move.Inside</h1>
        </header>
        <div>
            <div id="drag"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
        </div>
    </section>
</section>

CSS

/*    Resets
    ------    */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
acronym, applet, article, aside, canvas, details, figure, figcaption, hgroup, 
big, dialog, embed, meter, output, progress, rp, rt, ruby, s, strike, tt, xmp,
menu, footer, header, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0 none;
    font-size: 100%;
}

article, aside, details, menu, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
    display: block;
}

b,
strong {
/*
  Makes browsers agree.
  IE + Opera = font-weight: bold.
  Gecko + WebKit = font-weight: bolder.
*/
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
/*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

body {
    font-size: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

/****************/
/*** Demo CSS ***/
/****************/

#main section>div {
  background: #DDD;
  height: 260px;
  position: relative;
  margin-top: 30px;
}

#main section {
    margin-top: 25px;
}

#drag {
  background: #78BA91;
  cursor: move;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}
 
.drop {
  background: #6B7B95;
  float: left;
  height: 60px;
  margin-left: 20px;
  margin-top: 20px;
  width: 72px;
}

JavaScript

new Drag.Move.Inside(document.id('drag'), {

    container: $$('#inside>div')[0],

    droppables: $$('#inside .drop'),

    onInside: function(element, droppable){
        droppable.setStyle('background', '#E79D35');
    },

    onLeaveInside: function(element, droppable){
        droppable.setStyle('background', '#6B7B95');
    },

    onDrop: function(element, droppable){
       if (droppable) droppable.setStyle('background', '#C17878');
    }

});