Droppable object isn't resizable

Question

I am trying to drag and drop image and make the cloned droppable image resizable after drop without any luck...

My code is:

<img class="dragger" id="obj1" style="cursor: -webkit-grab;float:left; margin-left:5px; margin-top:5px;" src="objects/bike.png" width="80" height="80">


<img class="dragger" id="obj2" style="cursor: -webkit-grab;float:left; margin-left:5px; margin-top:5px;" src="objects/car.png" width="80" height="80">


//The dropable div
<div id="contentHolder"></div>

Jquery Code:

<script>
$(document).ready(function() {

window.zindex = 999;

    //$(".dragger").resizable({handles: 'ne, se, sw, nw'});

    $(".dragger").draggable({       
    helper: "clone" 
    }).on('dragstop', function (event, ui) {
    $(this).after($(ui.helper).clone().draggable());        
    });



$("#contentHolder").droppable({
   drop: function(event, ui) {


var id = ui.draggable;

 if(ui.draggable.hasClass("dragger")) {

    $(".dragger").each(function(i) {
    $(this).attr('id', "dragger" + (i + 1));
    $(this).removeClass( "dragger" ).addClass("dragger" + (i + 1));
    $("dragger" + (i + 1)).resizable({handles: 'ne, se, sw, nw'});
    });


 }


      }    

 });

});

Any suggestions why my cloned droppable images isn't resizable?

possible duplicate of [Jquery Draggable AND Resizable](http://stackoverflow.com/questions/4948582/jquery-draggable-and-resizable) — T J, Nov 26 '14 at 16:42

antisilent · Accepted Answer · 2014-11-26T03:34:01.423

Well, you've got a lot of extra code going on, but the root of your problem is that jQuery is wrapping your image in a div when it makes your clone draggable, and the resizable part of the image is actually within that div element.

The solution is to add a wrapper element around your images and then make the cloned element draggable and the image inside of it resizable. You also need to add display: inline-block; to the CSS of the dragged clone so that the outer div will form itself naturally around the img element as it's being resized.

Also, to get this all to fire off correctly, you want to bind all of it to the stop event of the draggable element, and not to the drop event of the droppable one.

HTML:

<div class="dragger">
    <img id="obj1" src="http://placehold.it/80x80" />
</div>
<div class="dragger">
    <img id="obj2" src="http://placehold.it/80x80" />
</div>
<div id="contentHolder"></div>

CSS:

#contentHolder {
    display: block;
    width: 100%;
    min-height: 500px;
    border: 2px dashed #999;
}
.dragger, .dragger-clone {
    cursor: -webkit-grab;
    display: inline-block;
}

jQuery:

$(document).ready(function () {
    $(".dragger").draggable({
        containment: 'html',
        helper: 'clone',
        stop: function (event, ui) {

            /* First, make the clone and append it 
             * to the droppable container
             */
            $(ui.helper)
                .clone(true)
                .removeClass('ui-draggable-dragging')
                .addClass('dragger-clone')
                .appendTo('#contentHolder');

            /* Next, make the clone draggable and 
             * contained by the droppable container
             */
            $(".dragger-clone")
                .draggable({ containment: '#contentHolder' });

            /* Now, make the image within the clone resizable
             */
            $(".dragger-clone img")
                .resizable({handles: 'ne, se, sw, nw'});
        }
    });
    $("#contentHolder").droppable();
});

JSFiddle here...

Some more sources: [here](http://stackoverflow.com/questions/2458817/jquery-ui-drag-and-clone-from-original-div-but-keep-clones), [here](http://stackoverflow.com/questions/4948582/jquery-draggable-and-resizable), and [here](http://stackoverflow.com/questions/12349053/jquery-ui-on-drop-attach-the-div-to-its-droppable-target) (EDIT: Formatting, links.) — antisilent, Nov 26 '14 at 03:24

Droppable object isn't resizable

1 Answers1