JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

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

Control Layout:
<ul id="controlLayout" class="draggable-block">
    <li data-field="dropzone">dropzone</li>
    <li data-field="breaksection">breaksection</li>
</ul>

<br /><br />

Form Layout:
<section id="formLayout" class="droppable-block">

    <div>
        <ul class="droppable">

        </ul>
    </div>
</section>

<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

section { padding:10px 30px; background-color:#fef0fd; border:1px solid #ccc;}
div { margin: 5px; background-color: #ccc;}

ul { padding:10px 30px; background-color:#eee; border:1px solid #ccc;}
li { border: 1px solid #aaa; margin: 5px; background-color: #ccc;}

.sub-title { border:none; background-color:#efefef;}

.layout-2-column { overflow:hidden;}
.layout-2-column > div { width:48%; float:left;}

.clear {clear:both; width:99% !important;}

JavaScript

// layout control
function addDropzones(ui) { 
    $(ui.item).empty();
    var ul = $(document.createElement('ul')).attr({class:'droppable'});
    var h4 = $(document.createElement('h4')).text('new section');
    var hgroup = $(document.createElement('hgroup')).append(h4);
   
    switch($(ui.item).attr('data-field').toUpperCase()) {
        case 'DROPZONE':
            $(ui.item).append(ul);
            break;
        case 'BREAKSECTION':
            $(ui.item).addClass('clear');
            $(ui.item).append(hgroup);
            break;
        default:    
    }
    
    $(ul).sortable({
        update: function(event, ui) {
            var data = $(ui.item).attr('data-field');
            var keys = $.parseJSON(data);
            if ($(ui.item).text() == keys.ElementId) {
                addFields(ui);
            }
        },
        receive: function(event, ui) {
            $(ui.item).draggable('disable');
        },
        connectWith: ".droppable"
    });

}

$(document).ready(function() {
    $(".droppable-block").sortable({
        update: function(event, ui) {
            
        },
        receive: function(event, ui) {
           var remove = $(document.createElement('a')).html('remove');
             var edit = $(document.createElement('a')).html('edit'); 
             var ul = $(document.createElement('ul')).attr({class:'droppable'});
             var h3 = $(document.createElement('h3')).attr({class:''}).html('Section Title');
             var div = $(document.createElement('div')).attr({class:'ui-draggable'});
             $(this).find('>li').each(function() {
                 switch ($(ui.item).attr('data-field').toUpperCase()) {
                     case 'DROPZONE':
                         div.append(ul).append(remove);
                         break;
                     case 'BREAKSECTION':
                         div.append(h3).append(remove).append(edit);
                         break;  
                 }
             });
            ...