JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<div id="start-game">
    <div class="begin-word">start</div>
    <div class="begin-def">begin a new game of scatter</div>
</div>

CSS

* {
    color: #111;
}

.begin-word {
    left: 0;
    cursor: move;
}

.begin-def {
    left: 100px;
}

.mouseover {
    color: #0050A7;
    opacity: .7;
}

#start-game div{
    position: absolute;
    top: 10px;
    text-shadow: white 0 1px 0;
}

JavaScript

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

    $$('.begin-word').makeDraggable({

        droppables: $$('.begin-def'),

        onEnter: function(draggable, droppable){
            droppable.addClass('mouseover');
        },

        onLeave: function(draggable, droppable){
            droppable.removeClass('mouseover');
        },

        onDrop: function(draggable, droppable){
            if (droppable){
                draggable.destroy();
            }
        }

    });
    
    $$('.begin-word').addEvents({
        mouseenter: function(){
            this.addClass('mouseover');
        },
        mouseleave: function(){
            this.removeClass('mouseover');
        }
    });
});