JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

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

<section id="formLayout" class="droppable-block">
</section>

CSS

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

JavaScript

function addDropBlocks(ui) { 
alert('yes');
}
$(document).ready(function() {
    $(".droppable-block").sortable({
            start: function (event, ui) {
                console.log("start");
            },
            over: function (event, ui) {
                console.log("over");
            },
            change: function (event, ui) {
                console.log("change");
            },
            beforeStop: function (event, ui) {
                console.log("before stop");
            },
            receive: function (event, ui) {
                console.log("receive");
                var remove = $(document.createElement('a')).html('remove');
                var edit = $(document.createElement('a')).html('edit'); 
                var ul = $(document.createElement('ul')).attr({class:'dropable ui-sortable'});
                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;  
                    }
                });
                $(this).find('li').replaceWith(div);
                
                remove.on('click',function() {
                    $(this).parent().remove();
                });
            },
            update: function (event, ui) {
                console.log("update");
            },
            out: function (event, ui) {
                console.log("out");
            },
            remove: function (event, ui) {
                console.log("remove");
            },
            stop: function (event, ui) {
          ...