JSFiddle - React, Tailwind, and code Playground

by Valtos

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <div class='other draggable'>Other</div>

<input type='button' id='newTab' name='newTab' value='Create New Tab'></div>

CSS

.mainBucket{
        float:left;
        width:80%;
            border:1px solid;
        background-color:#F2F2F2;
        width:45%;
        margin:2%;
        height:200px;
}
.drop{
        width:100%;
        background-color:#E8E9E0;
        min-height:100px;
}
.tabModule{
        border:1px solid;
        background-color:#F2F2F2;
        width:45%;
        margin:2%;

}
.other{
        float:left;
        clear:both;
        height:25px;
    background-color:#E1E1E1;
}

JavaScript

$(function() {
    
    
    $(".draggable").draggable({
        cursor: 'move',
        revert: 'invalid',
        helper: 'clone',
        distance: 20
    });
    
    jQuery.fn.makeDropable = function() {
        $(this).droppable({
            hoverClass: 'ui-state-active',
            tolerance: 'pointer',
            accept: function (event, ui) {
                return true;
            },
            drop: function (event, ui) {
                $(ui.draggable).remove();
                var obj;
                if ($(ui.helper).hasClass('draggable')) {
                    if($(ui.draggable).parents("div").length > 0){
                        $(ui.helper).clone().appendTo($(this)).removeAttr('style');
                        $(ui.helper).remove();
                    }else{
                        obj = $(ui.helper).clone();
                        var liId = ui.draggable.attr('id');
                        obj.attr('id', (liId).toString());
                        obj.addClass('editable').removeAttr('style');
                        $(this).append(obj);
                    }
                }
            }
        });
    }
    
    var i = 0;
    $('#newTab').click(function() {
        i++;
        var div = $('<div class="drop"/></div>').appendTo('body');
        div.attr('id', 'theDiv'+i);
        div.addClass('tabModule drop');
        div.html('hello');
        div.makeDropable();
    });
});