Resizing after droppable doesn't work

I am going through an odd problem: things are messed up between Resizable and Droppable Jquery Events.

Problem

I have a div that I can easily change. but i cant resize after i drag this div to the resettable area. Can anyone help on this.

This is my Demo script

I have the following code

JQuery

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

        });

      

        
        
        
      

    

Html

<div class="selectorField resize_box" style="height: 100px; width: 100px; background-color: green;"></div>

<div style="height:100px; width:100px;" ></div>
    <div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;">

        <div class="well droppedFields ui-sortable" style="width: 73px;"></div>

    </div>

      

        
        
        
      

    

CSS

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