JSFiddle - React, Tailwind, and code Playground

by tonybo

HTML

<div id="draggable_object"></div>
<div id='dropzone'>
    <div id="call_to_action">drag the white square from the left top corner and drop them into red zone,<br/>registered drops are in green zone:</div>
    <ul id='filelist'></ul>
</div>
<div id="comments"></div>

CSS

#draggable_object {
    width:10px;
    height:10px;
    border:1px solid black;
    background:#ffffff;
}

#dropzone {
    background:#FF0000;
    padding:50px;
}

#filelist {
    background:#00FF00;
    padding:5px;
}

.fileitem {
    background:#0000FF;
    padding:10px;  
    color:#ffffff;
    margin:5px;            
}
#comments {
    background:#FFFF00;
    padding:50px;
}

JavaScript

$(document).ready(function () {
    // note the dollar sign in the variable name, it helps me to remeber that variable stores the jquery wrapped object
    var $comments = $("#comments");
    // just handy function for pretty output in yellow section
    function log (message, clear) {
        if (clear) {
            $comments.html(message);
        } else {
            $comments.append("<br/>" + message);
        }
    }
    
    // initialize the white square in left top corner
    $('#draggable_object').draggable();
    
    // function to initialize every li object
    function initLIObject ($li) {
        $li.droppable({
            greedy:true,
            drop : function (e, ui) {
                 // reset draggable object position
                ui.draggable.css({
                    left:0,
                    top:0
                });
                
                log("drop above dropitem detected");
                
                //change background as reaction to drop
                $(this).css({
                    background:'#FF00FF'
                });
            }
        });
    }
    
    
    // initialize the big red zone
    $('#dropzone').droppable({
        drop:function (e, ui) {
            // reset draggable object position
            ui.draggable.css({
                left:0,
                top:0
            });
            
            log("drop above dropzone detected");
            
            // create new <li> object
            var $newFile = $("<li class='fileitem'>drop on me to change color</li>");
            
            // initialize the new <li> object as droppable
            initLIObject($newFile);
            
            $("#filelist").append($newFile);
        }
    });
   
    // in case you have some li objects in html you should initialize them here the same way
    // initLIObject ($('.fileitem'));
    
    log("init done");
});