How to combine jQuery UI draggable, droppable and resizable?

Question

I'm trying to combine all these three plugins but I|'m having some problems with adding the resizeable() to the dropped items.

I have #container1 with items that can be dropped and cloned into #container2. After being dropped into #container2 the cloned items should be draggable contained to #container2 and be abled to resized. The dragging and dropping works well but when I add the $canvasElement.resizable() the dropped elements get width and height = 0px.

$(function () {

$("#container1 img").draggable({
    helper: 'clone',
    cursor: 'move'
});

$("#container2").droppable({
    accept: 'img',
    drop: function (event, ui) {
        var $canvas = $(this);
        if (!ui.draggable.hasClass('canvas-element')) {
            var $canvasElement = ui.draggable.clone();
            $canvasElement.addClass('canvas-element');
            $canvasElement.resizable();
            $canvasElement.draggable({
                containment: '#container2'
            });
            $canvas.append($canvasElement);
            $canvasElement.css({
                left: (ui.position.left),
                top: (ui.position.top),
                position: 'absolute'
            });
        }
    }
});

});

Answer 1

Take a look at this JQFAQ.com topic, this will help you to combine ui-draggable, droppable and resizable. There are few more sample FAQs too.