JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<div id="draggables">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>
 
<div id="droppables">
    <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>

CSS

#draggables {
    height: 100px;
    position: relative;
} 
    #draggables DIV {
        background: #78BA91;
        cursor: move;
        height: 50px;
        left: 10px;
        position: absolute;
        top: 10px;
        width: 50px;
    }
     
#droppables DIV {
    background: #6B7B95;
    float: left;
    height: 100px;
    margin: 10px;
    width: 100px;
}

JavaScript

window.addEvent('domready', function(){

    $$('#draggables DIV').makeDraggable({

        droppables: $$('#droppables DIV'),

        onEnter: function(draggable, droppable){
            droppable.setStyle('background', '#E79D35');
        },

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

        onDrop: function(draggable, droppable){
            if (droppable){
                draggable.destroy();
                droppable.morph({
                    'height': droppable.getStyle('height').toInt() + 30,
                    'background-color' : ['#E79D35', '#6B7B95']
                });
            } else {
                draggable.setStyle('background', '#C17878');
            }
        }

    });

});