JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="drag">&lt;div&gt;</div>


<div data-css="holder"></div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;    
}
.drag {
    border: 1px solid gray;
    padding: 0.5em;
    width: 2em;
    cursor: move;
    background: #fff;
}
.active {
   border: solid 1px orange;        
}
*[data-css=holder] {
    position: relative;
    border: solid 1px grey;  
    display: block;
    margin: 1em; 
    padding: 2em;    
}
*[data-css=holder]:before {
    content: 'Layout';
    position: absolute;
    top: 5px;
    left: 5px;
    color: #ccc;
    z-index: 1;
}
*[data-css=box] {
    border: dashed 1px grey;  
    display: inline-block;
    margin: 1em;
    padding: 2em;    
}
.drop {
    border: 1px solid gray;
    margin: 5em auto;
    padding: 2em;
}

JavaScript

$(".drag").draggable();
var counter = 0;
var subcounter = 0;
var lastcounter = 0;

$('div[data-css="holder"]').droppable({
    accept: ".drag",
    drop: function( event, ui ) {
        $(ui.draggable)
        counter += 1;       
        $(this).append('<div data-css="box">box-' + counter + ' </div>')
            .attr('contenteditable', 'true')
            .droppable({
                accept: ".drag",
                drop: function( event, ui ) {
                    counter += 1;
                    $(this).append('<div data-css="box">box-' + counter + ' </div>');
                }
           });            
        $(this).addClass('active');    
    }
});