JSFiddle - React, Tailwind, and code Playground

by anish274

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="button" class="Mybutton" value=" Add div" />
<br />
<div class="selectorField" style="height: 100px; width: 100px; background-color: green;"></div>
<div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;">
    <div class="well droppedFields ui-sortable Resizable" style="width:73px;"></div>
</div>

CSS

#Section1 > div {
     display: table-cell;
     /*width: 1%;*/
     border-right: 1px dotted red;
     text-align: center;
 }

JavaScript

function makeDraggable() {
            $(".selectorField")
                .draggable({
                containment: $('body'),
                helper: "clone",
                stack: "div",
                cursor: "move",
                cancel: null
            });
        }


        $(function () {
            var _ctrl_index = 1001;
            // function docReady() {


            $(".Resizable").resizable({
                handles: 'e'
            });

            makeDraggable();

            $(".droppedFields").droppable({
                accept: ":not(.ui-sortable-helper)",


                drop: function (event, ui) {


                    var draggable = ui.draggable;
                    draggable = draggable.clone();
                    draggable.appendTo(this);
                    //   $(ui.draggable).hide();

                    makeDraggable();
                }
            });


            var count = 0;
            $('.Mybutton').click(function () {
                count++;
                if (count < 5) {
                    // alert("aa");

                    var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1");
                    a.droppable();
                    a.resizable({
                        handles: 'e'
                    });
                    a.droppable({
                        accept: ":not(.ui-sortable-helper)",


                        drop: function (event, ui) {


                            var draggable = ui.draggable;
                            draggable = draggable.clone();
                            draggable.appendTo(this);
                            //   $(ui.draggable).hide();

                            makeDraggable();
                        }
                    });

                } else {
                    alert('No more divs to add');
                }
            });
        });