JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

Control Field:
<ul id="controlField" class="draggable">    
</ul>

Form Field:  
<ul id="formField" class="droppable">
</ul>

<div class="modal">
    <div class="box">
        <ul>
            <li>
                <label>label name:</label>
                <input type="text" id="txtLabel" />
                <input type="button" id="btnSave" value="save" />
            </li>
        </ul>
    </div>
    <div class="mask"></div>
</div>

CSS

ul { padding:10px 30px; background-color:#eee; border:1px solid #ccc;}
li { border: 1px solid #aaa; margin: 5px; background-color: #ccc;}
.modal { position:absolute; width:100%; height:100%; top:0; left:0;}
.mask { position:fixed; width:100%; height:100%; top:0; left:0; background-color:#333; opacity:.5;}
.box { width:500px; background-color:#fff; z-index:1;}

JavaScript

var data = {
    "FieldElements" : [
        {
            "DataType" : "text",
            "ElementType" : "input",
            "ElementId" : "field1",
            "ElementName" : "field1",
            "ElementClass" : "",
            "FormElementId" : "0",
            "Label" : "Activity",
            "LabelId" : "label1",
            "LabelFor" : "field1",
            "ValidateFunction" : "",
            "Value" : "",
            "Disabled" : ""
        },
        {
            "DataType" : "email",
            "ElementType" : "input",
            "ElementId" : "field2",
            "ElementName" : "field2",
            "ElementClass" : "",
            "FormElementId" : "0",
            "Label" : "Activity Objective",
            "LabelId" : "label2",
            "LabelFor" : "field2",
            "ValidateFunction" : "",
            "Value" : "",
            "Disabled" : ""
        }
    ]
}
    
function loadControls(data) {
    var output = '';
    $.each(data.FieldElements, function (data, keys) {      
        output += '<li ' + 'data-field=' + "'" + JSON.stringify(keys) + "'" + '>' + keys.ElementId + '</li>';
    });
    $('#controlField').append(output);
}

function addFields(ui) {
    var data = $(ui.item).empty().attr('data-field');
    var keys = $.parseJSON(data);
    var label = $(document.createElement('label')).text(keys.Label);
    var input = $(document.createElement('input'));
    var select = $(document.createElement('select'));
    var div = $(document.createElement('div'));
    var span = $(document.createElement('span'));
    var remove = $(document.createElement('a')).text('remove ');
    var edit = $(document.createElement('a')).text('edit');
    
    switch(keys.ElementType.toUpperCase()) {
        case 'INPUT':
            $(div).append(input);
            $(ui.item).append(label).append(div).append(remove).append(edit);
            break;
        case 'SELECT':
            break;
        default:    
    }
   ...