JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="wrap">
<section class="drags">
    <div class="block">
        <header class="header block-header"><h4>Layout</h4></header>
        <div class="main block-main">
            <ul>
                <li class="dragarea" data-type="area" data-content="content">area</li>
                <li class="dragsection" data-type="section" data-content="content">section</li>
                <li class="dragblock" data-type="block" data-content="form">form</li>
                <li class="dragblock" data-type="block" data-content="grid">gridview</li>
            </ul>
        </div>
    </div>
</section>

<section class="drops">
    <!-- drops stage -->
</section>
</div>
<!--
<section class="drops">
    <div>
        <div class="droparea">
            <div>
                <section class="dropsection">
                    <div>
                        <div class="dropblock">
                            <div></div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>
-->

CSS

* { box-sizing: border-box;}
body { font:12px arial;}
h1,h2,h3,h4,p {margin:0; padding:0;}
ul { margin:0; padding:0; list-style:none;}
/* todo form drop padding needed vs main grobal setting */
ul { padding:10px;}
.wrap { display:table; width:95%;};
.drags  { width:150px;}
.drops  {}
.drags, .drops { display:table-cell; vertical-align:top; padding:10px;}
.droparea, .dropsection, .dropblock {}

/* global block layout */
.area, .section, .block    { border:1px solid #eee; margin-bottom:15px;}
.header, .main, .footer    { padding:10px}
.header                    {border-width:0; border-bottom:1px solid #eee;}



/* global modifier group block layout */
.area        {}
.area-header {}
.area-body   {}
.area-footer {}

.section        {}
.section-header {}
.section-body   {}
.section-footer {}

.block          {}
.block-header   {}
.block-body     {}
.block-footer   {}

/* components */
.control { background-color:#ccc; position:absolute; top:0; right:0; z-index:1;}
.button  { display:inline-block; padding:5px; cursor:pointer;}

/* table */
.table       { width:100%; padding:0; margin:0; border-collapse:collapse; margin-bottom:15px;}
.table thead { text-align:left; background-color:#f8f8f8;}
.table tbody {}
.table tfoot {}

.table th, .table td { border:1px solid #eee; padding:5px;}

/* clear last margin */
.main > *:last-child,
.main > *:last-child > *:last-child,
.main > *:last-child > *:last-child > *:last-child { margin:0;}

.block > *:last-child,
.block > *:last-child > *:last-child,
.block > *:last-child > *:last-child > *:last-child { margin:0;}

/* modifier */
.rel { position:relative;}
.abs { position:absolute;}
.fix { position:fixed;}




.colorPicker-picker {
    height: 16px;
    width: 16px;
    border: 1px solid #333;
    cursor: pointer;
    display: inline-block;
}

.colorPicker-palette {
    width: 110px;
    border: 1px solid #333;
    position: absolute;
    background-color: #eeeeee;
    padding: 2px;
    z-index: 1000;
}

.colorPicker-swatch {
   ...

JavaScript

// FormBuilder v.1
var FormBuilder = (function () {

    // configs
    var configs = {};
    //
    var defaults = {
        CssStyle: {
            // settings
            IsDefault: false,
            IsOverwrite: false,
            // wrapper
            BorderTopWrapper: "",
            BorderRightWrapper: "",
            BorderBottomWrapper: "",
            BorderLeftWrapper: "",
            BorderWidthWrapper: "",
            BorderStyleWrapper: "",
            BorderColorWrapper: "",
            TextColorWrapper: "",
            BackgroundColorWrapper: "",
            // header
            BorderTopHeader: "",
            BorderRightHeader: "",
            BorderBottomHeader: "",
            BorderLeftHeader: "",
            BorderWidthHeader: "",
            BorderStyleHeader: "",
            BorderColorHeader: "",
            TextColorHeader: "",
            BackgroundColorHeader: "",
            // main
            BorderTopMain: "",
            BorderRightMain: "",
            BorderBottomMain: "",
            BorderLeftMain: "",
            BorderWidthMain: "",
            BorderStyleMain: "",
            BorderColorMain: "",
            TextColorMain: "",
            BackgroundColorMain: "",
        }
    }
    //
    var settings = {
        Css: {
            Area: $.extend(true, {}, defaults.CssStyle),
            Section: $.extend(true, {}, defaults.CssStyle),
            Block: $.extend(true, {}, defaults.CssStyle)
        }
    }

    // .droparea
    var dragarea;
    var drops;
    // .dropsection
    var dragsection;
    var droparea;
    // .dropblock
    var dragblock;
    var dropsection;
    // .grid
    var draggrid;
    var dropgrid;
    // .field
    var dragfield;
    var dropform;

    // query
    var query = window.location.search.substring(1).split('&');
    var vars = query[0].split('=');
    // temp
    var formId = vars[1], cssArray = [], areaId = 0, sectionId = 0, blockId = 0;
    // load data from db
    var dataElement =...