JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="dropzone"></div>
<span class="add_dropzone">add dropzone</span>

<ul>
    <li class="draggable-source">
        <div style="background-color:red;" id="drag">
            <div class="cat_info">	<span class="box_collapse glyphicon glyphicon-plus"></span>
	<span class="cat_title">add topping</span>

            </div>
            <div class="drag_remove"></div>
        </div>
    </li>
    <li class="draggable-source">
        <div style="background-color:blue;" id="drag">Biology</div>
    </li>
</ul>

CSS

.dropzone {
    border:1px solid #000;
    min-height:20px;
    width:100%;
    padding:10px;
}

JavaScript

$(document).on("click", ".add_dropzone", function (e) {
    $('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());
    initDroppable();
});

$("ul li").each(function () {
    $(this).draggable({
        helper: "clone"
    });
});
initDroppable();

function initDroppable() {
    if (typeof window.dropElem != "undefined") window.dropElem.droppable('destroy');
    window.dropElem = $(".dropzone").droppable({
        activeClass: "active",
        hoverClass: "ui-state-active",
        tolerance: "touch",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            console.log(event);

            var targetElem = $(this).attr("id");

            $(this).addClass("ui-state-highlight");

            if ($(ui.draggable).hasClass('draggable-source')) $(ui.draggable).clone().appendTo(this).removeClass('draggable-source');


            else $(ui.draggable).appendTo(this);

            $('.delete').on('click', function () {
                $(this).parent().parent().parent().parent('li').remove();
            });
            //alert($(this).text());
        }

    }).sortable({
        items: "li:not(.placeholder)",
        sort: function () {
            $(this).removeClass("ui-state-default");
        }
    });
}