JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<section class="draggable-area">
    <h5>Dragblock</h5>
    <ul class="draggable-block">
        <li data-class="dropsection">dropzone</li>
        <li data-class="breaksection">break section</li>
    </ul>
</section>
<section class="droppable-block form-2-cols">
    <!-- droppable area -->
</section>

CSS

*{margin:0;}
section { padding:10px 30px; background-color:#fef0fd; border:1px solid #ccc; border-left: red;}
.draggable-area { background-color:#fff;}
.droppable { padding:10px 30px; background-color:#eee; border:1px solid #ccc;}
.droppable li { border: 1px solid #aaa; margin: 5px; background-color: #ccc;}
a { margin-right:15px; cursor:pointer;}
.form-2-cols {overflow:hidden;}
.form-2-cols > .dropsection {float:left;; width:50%;}
.form-2-cols > .breaksection { clear:both; background-color:#fff;}

JavaScript

var FormBuilder = (function () {
    var config = {
        css: {
            classname: "",
            id: "",
            styles: {

            },
            defaults: {
                div: {
                    // box
                    border_width: "",
                    border_style: "",
                    border_color: "",
                    border_top: "",
                    border_right: "",
                    border_bottom: "",
                    border_left: "",
                    width: "",
                    background_color: "",
                    //
                    hgroup: {
                        h3: {
                            color: "",
                            font_size: ""
                        },
                        p: {
                            color: "",
                            font_size: ""
                        }
                    },
                    ul: {
                    }
                }
            }
        },
        settings: {
            urls: {
                getFormLists: "",
                getSections: "",
                getElements: "" 
            },
            controls: {
                dragblock: ".draggable-block",
                dropblock: ".droppable-block",
                drag: ".draggable",
                drop: ".droppable"
            }
        }
    }
    
    var dataSections = [];
    var dataFields = [];
    var fields = [];
    var sections = [];
    var secId = 0;
    
    var dragblock = config.settings.controls.dragblock;
    var dropblock = config.settings.controls.dropblock;
    var drag = config.settings.controls.drag;
    var drop = config.settings.controls.drop;

    // github.com/Box9/jss
    var updateCss = (function () {})();

    var updateForm = (function () {
        //
        function sectionElements(id, type, name, description) {
            this.ArrayId = id;
            this.Type = type;
            this.Name = name;
           ...