JSFiddle - React, Tailwind, and code Playground

by Prasad Gavande

HTML

<div class="demo">
    <div class="draggable ui-widget-content correct">
        <p>If</p>
    </div>
    <div class="draggable ui-widget-content">
        <p>Else</p>
    </div>
    <div class="draggable ui-widget-content">
        <p>3</p>
    </div>
    <div class="draggable ui-widget-content">
        <p>4</p>
    </div>
    <br style="clear: both">
    <div id="droppable" class="ui-widget-header">
        <p>Drop here</p>
    </div>
</div>

CSS

.draggable {
    width: 50px;
    height: 50px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
}

JavaScript

//select and diselect on the basis of text

$(function () {


    $(".draggable").draggable({
        revert: true
    });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        // uncomment the line below to only accept the .correct class..
        // Note: the "drop" function will not be called if not ".correct"
        //  accept : '.correct',
        drop: function (event, ui) {
            // alternative method:
            if (ui.draggable.find('p').text() == "If") {
                //if (ui.draggable.is('.correct')) {
                $(this).addClass('ui-state-highlight').find('p').html('You got it!');
                // cloning and appending prevents the revert animation from still occurring
                ui.draggable.clone(true).css('position', 'inherit').appendTo($(this));
                ui.draggable.remove();
            } else {
                $('#droppable > p').html('Not that one!')
                setTimeout(function () {
                    $('#droppable > p').html('Drop here');
                }, 1000);
            }
        }
    });

});