JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<ul class="tab-list">
                        <li>
                            <img src="http://creditworksusa.com/wp-content/uploads/2014/04/google-g-logo.png" data-itemstate="rectangle" />
                        </li>
                        <li>
                            <img src="http://creditworksusa.com/wp-content/uploads/2014/04/google-g-logo.png" data-itemstate="circle" />
                        </li>
</ul>

<div id="main"></div>

CSS

img{
    width:50px;
    height:50px;
    cursor:pointer;
}

div{
    border:1px solid;
    width:20px;
    height:20px;
}

#main{
    width:200px;
    height:200px;
    border:2px solid;
}

JavaScript

$('.tab-list img').draggable({
            helper: "clone",
        });

        $('#main').droppable({
            drop:function(event, ui) {
                var item = $(ui.draggable);

                var add;
                if(item.data('itemstate') == 'rectangle'){
                    add = '<div class="triangle"></div>';
                }
                $(this).append(add);
            }
        });