JSFiddle - React, Tailwind, and code Playground

by Jude Duran

HTML

<div id="top">
    <div class="top-icon">YELLOW</div>
</div>
<div id="content"></div>

CSS

#top, #content {
	    width:500px;
	    height:100px;
	    border:solid 1px #cccccc;
	    padding-left:20px;
	    font-family:Arial, Verdana;
	    font-size:12px;
	}
	#top {
	    height:50px;
	}
	#content {
	    height:400px;
	    margin-top:20px;
	    background:#eeeeee;
	}
	.top-icon {
	    background:yellow;
	    width:100px;
	    height:20px;
	    font-weight:bold;
	    text-align:center;
	    cursor:move;
	    line-height:20px;
	    border:solid 1px #cccccc;
	    margin-top:10px;
	}
	.color-box {
	    margin-top:20px;
	}
	.add-item {
	    background:#fff7d5;
	    width:100px;
	    height:20px;
	    margin-top:5px;
	    border:solid 1px #cccccc;
	    line-height:20px;
	    text-align:center;
	    cursor:pointer;
	}

JavaScript

$(function () {

    $('#content').sortable({
        placeholder: 'ui-state-highlight'
    });


    $(".top-icon").draggable({
        connectToSortable: '#content',
        helper: myHelper,
        stop: handleDragStop
    });


    function myHelper(event) {
        return $(this).clone();
    }

    var i = 1;

    function handleDragStop(event, ui) {


        var current_text = '<div class="color-box"><b>Yellow Box ' + i + '</b>' + '<div class="yellow-content">' + '<div class="item">Item 1</div>' + '<div class="item">Item 2</div>' + '<div class="item">Item 3</div>' + '<div class="add-item">Add New Item</div>' + '</div>' + '</div>';
        $('#content .top-icon').after(current_text);

        i++;

        var $new_insert_item = $('#content .top-icon').next();
        $('#content .top-icon').remove(); // remove the clone .top-icon inside #content

        console.log('hi');
        // when click on Add New Item button
        


    }
    // end of handleDragStop

$(document).on('click', '.add-item', function () {

            var $this = $(this);
            var item_count = $this.siblings('.item').length + 1;
            console.log(item_count);

            var str_item = '';
            str_item = '<div class="item">Item ' + item_count + '</div>';

            $(str_item).insertBefore($this);


        });

});