JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

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

CSS

*{margin:0;}
section { padding:10px 30px; background-color:#fef0fd; border:1px solid #ccc;}
.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;}

JavaScript

var FormBuilder = (function() {
    var DEFAULTS = {};
    var dataFields = [];
    var fields = [];
    var sections = [];
    
    var dragblock,dropblock,drag,drop;
    
    var updateForm = (function() {
        
        function fieldElements(id, label, isRequired, isReadOnly, mapToSection) {
            this.UDFieldId = id;
            this.FieldLabel = label;
            this.IsRequired = isRequired;
            this.IsReadOnly = isReadOnly;
            this.MapToSection = mapToSection;
            this.Position;
        }
        
        function field(index) {
            var id = dataFields[index].UDFieldId;
            var label = dataFields[index].FieldName;
            var isRequired = dataFields[index].IsRequired;
            var isReadOnly = dataFields[index].IsReadOnly;
            var mapToSection = dataFields[index].MapToSection;

            if (fields.length > 0) {
                var isInArr = false; 
                $.each(fields, function (i, v) {
                     if (fields[i].UDFieldId == id) {
                         isInArr = true;
                     }
                 });
                if (isInArr == false) {
                   var fieldId = new fieldElements(id, label, isRequired, isReadOnly, mapToSection);
                   fields.push(fieldId);
                }
            } else {
                var fieldId = new fieldElements(id, label, isRequired, isReadOnly, mapToSection);
                fields.push(fieldId);
            }
            console.log(fields);
            return this;
        }
        
        function position() {
            $(dropblock).each(function() {
                var s = 0;
                var p = 0;
                $(dropblock).children().each(function() {           
                    for(var i = 0; i < $(this).length; i++) {
                        $(this).attr('data-section', s);
                        s++;
                    }
                });
               ...