JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="dragcontrols">
    <h5>Dragblock</h5>
    <ul class="draggable-block">
        <li data-field="dropzone">dropzone</li>
        <li data-field="breaksection">break section</li>
    </ul>
</div>

<section class="droppable-block">
    <div>
        <ul class="droppable"></ul>
    </div>
</section>

CSS

*{margin:0;}
section { padding:10px 30px; background-color:#fef0fd; border:1px solid #ccc;}
.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 = {};
FormBuilder.datafields = [];
FormBuilder.fields = [];
FormBuilder.eventdata = {};
FormBuilder.config = {};

// The Server Side API Config
FormBuilder.config.API = {};
FormBuilder.config.API.getelements = '@Url.Action("GetElements", "JsonOperations")';
FormBuilder.config.API.getformlists = '@Url.Action("GetFormsList", "JsonOperations")';


FormBuilder.FormUpdate = (function(){
    var DEFAULTS = {}
    function fieldelements(id) {
        this.Id = id;
        this.Posistion;
    }
    return {
        update: function(id) {
            if (FormBuilder.fields.length > 0) {
                var isInArr = false; 
                $.each(FormBuilder.fields, function (index, value) {
                     if (FormBuilder.fields[index].Id == id) {
                         isInArr = true;
                         //alert(FormBuilder.fields[index].Id);
                     }
                 });
                if (isInArr == false) {
                   //alert('yes');
                   var fieldId = new fieldelements(id);
                   FormBuilder.fields.push(fieldId);
                }
            } else {
                //alert('no');
                var fieldId = new fieldelements(id);
                FormBuilder.fields.push(fieldId);
            }
            console.log(FormBuilder.fields);
            return this;
        },
        remove: function(id) {
            alert(id);
            return this;
        }
    }
})();

 /*   
FormBuilder.Update = function(id) {
    
    function fieldelements(id) {
        this.Id = id;
        this.Posistion;
    }
    if (FormBuilder.fields.length > 0) {
        var isInArr = false; 
        $.each(FormBuilder.fields, function (index, value) {
             if (FormBuilder.fields[index].Id == id) {
                 isInArr = true;
                 //alert(FormBuilder.fields[index].Id);
             }
         });
        if (isInArr == false) {
           //alert('yes');
           var fieldId =...