JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <ul id="options"><span><h2> Components</h2></span>
    <li id="drag1" class="drag">  
        <textarea name="" cols="10" rows="5"></textarea>Text box<br>
    </li> <!-- end of drag1 -->
    <li id="drag2" class="drag">
    </li> <!-- end of drag2 -->
    <li id="drag3" class="drag">
        <input type="submit" value="submit" />submit_button<br> 
    </li> <!-- end of drag3 -->
    <li id="drag4" class="drag">
        <input type="radio" name="group1" value="radio-button"/> radio-button<br>  
    </li> <!-- end of drag4 -->
  </ul><!-- end of options -->
  
  <br/>
  <h2> Mockup Page</h2>
  <div id="frame">
    <span id="title">Drag here</span>
    <div id="tbldevs" > </div>
  </div><!-- end of frame -->
</div><!-- end of wrapper -->

CSS

#frame {
    background-color: #f3f9ff;
    width: 300px;
    height: 200px;
}

JavaScript

jQuery(document).ready(function() {
    //Counter
    counter = 0;


    // Remove an element dragged into the droppable area
    // The deletion is done on CTRL + click
    jQuery("#frame").delegate(".ui-draggable", "click", function(e) {
        if (e.ctrlKey) {
            $(this).remove();
        }
    });


    //Make element draggable
    jQuery(".drag").draggable({
        helper: 'clone',
        containment: 'frame',

        //When first dragged
        stop: function(ev, ui) {
            var pos = jQuery(ui.helper).offset();
            objName = "#clonediv" + counter;
            jQuery(objName).css({
                "position": "absolute",
                "left": pos.left,
                "top": pos.top
            });
            jQuery(objName).removeClass("drag");


            //When an existiung object is dragged
            jQuery(objName).draggable({
                containment: 'parent'
            });
        }
    });

    //Make element droppable
    jQuery("#frame").droppable({
        drop: function(ev, ui) {
            if (ui.draggable.attr('id').search(/drag[0-9]/) != -1) {
                counter++;

                var element = jQuery(ui.draggable).clone();
                element.addClass("tempclass");
                jQuery(this).append(element);
                jQuery(".tempclass").attr("id", "clonediv" + counter);
                jQuery("#clonediv" + counter).removeClass("tempclass");

                //Get the dynamically item id
                draggedNumber = ui.draggable.attr('id').search(/drag([0-9])/);
                itemDragged = "dragged" + RegExp.$1;

                jQuery("#clonediv" + counter).addClass(itemDragged);
            }
        }
    });
});