Jquery Droppable not working for Dynamically added DIVS

Question

I have issue same as This and This

I need drag drop and resize functionality, It works fine for the static elements, but i have to add dynamic divs , and for the dynamic divs it the resize property is works fine, but droppable functionality is not working ... i spent last day in R&D and apply solution of same , but no lluck

Here is a JSSFiddle

How can i overcome this

Here is Code snippet

CSS

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

HTML

 <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>

JQUERY

   function makeDraggable() {
            $(".selectorField")
                .draggable({
                    containment: $('body'),
                    helper: "clone",
                    stack: "div",
                    cursor: "move",
                    cancel: null
                });
        }
        $(function () {
            var _ctrl_index = 1001;
           $(".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);
                    makeDraggable();
                }
            });
// add divs dyynamically
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' });
                }
                else {
                    alert('No more divs to add')
                }
            });
        });

All i need your kind help

Answer 1

You are not making the dynamic div droppable. I've update your JSfiddle to reflect this change. See line 52.

Answer 2

Please see the following fiddle.

http://jsfiddle.net/tdorbbv6/8/

        function makeDraggable() {
        $(".selectorField")
            .draggable({
                containment: $('body'),
                helper: "clone",
                stack: "div",
                cursor: "move",
                cancel: null
            });
    }
function Droppable(){
 $(".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();
            }
        });
}
        $(function () {
        var _ctrl_index = 1001;
        // function docReady() {


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

        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");
               Droppable();
                //a.droppable();
                //a.resizable({ handles: 'e' });
                //  a.makedroppable(); { handles: 'e' }

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

After adding controls dynamically, You have to again assign the event to that controls. Write your code of droppable inside function quotes.

After you add controls just call that function to bind event of droppable.

Hope that helps.