CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Caffeine addicted
Caffeine addicted

Reputation: 324

Resize after droppable is not working

I am going through the odd problem ,, The things are messed up between the Resizable and the droppable Jquery Events .

Problem

I have div which i can easily resize . but i am not able to resize after i drag and drop this div into the droppable area. Can any one help about this.

This is my Demo Fiddle

I have 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;
        }

Upvotes: 3

Views: 1539

Answers (1)

cjspurgeon
cjspurgeon

Reputation: 1515

Apologies, I mis-read the question. The element is not resizable after dragging because the cloned element does not have re-sizable attached to it.

After cloning draggable, also re-attach the handle, using the existing handle element.

var draggable = ui.draggable;
draggable = draggable.clone();
draggable.resizable({ handles: {'e': '.ui-resizable-e'} });
draggable.appendTo(this);

Fiddle

Upvotes: 5

Related Questions