jquery added class inside a droppable not becoming resizable if outside drop event

Question

When dropping something in this drop area, the object will be cloned and will get part class.

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if ($(ui.helper).hasClass('drag') ) {
            $(this).append($(ui.helper).clone());
            $('#board .drag').addClass("part");
            $('.part').removeClass("drag");
        };
       ....
)};

There is a way to give doppable/draggable/resizable properties to "part" class without doing this inside drop event, but defining it outside? Because the only way to make it work is to give that inside drop function.

WORK

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if ($(ui.helper).hasClass('drag') ) {
            $(this).append($(ui.helper).clone());
            $('#board .drag').addClass("part");
            $('.part').removeClass("drag");
        };

        $('.part').resizable({
            containment: "#board",
            aspectRatio: true
        });
        ....
)};

NOT WORK

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if ($(ui.helper).hasClass('drag') ) {
            $(this).append($(ui.helper).clone());
            $('#board .drag').addClass("part");
            $('.part').removeClass("drag");
        };

        ....
)};
$('.part').resizable({
            containment: "#workarea",
            aspectRatio: true
});

I'm new to javascript and jquery, so if you find other errors, please report. Thanks for helping.

EDIT: complete code http://jsfiddle.net/funnydj/qtBfJ/2/

Answer 1

By addressing the jQuery collection $('.part') inside the drop handler, you will affect all elements in the document with class="part".

Typically, it is necessary only to address the element that's just been dropped/cloned, and given that that element is given class="part", I'm guessing that only it needs to be addressed. All previously dropped/cloned elements should already have received the appropriate treatment.

If I'm right, then you probably want something like this :

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if(ui.helper.hasClass('drag') ) {
            var $part = ui.helper.clone().removeClass("drag ui-draggable-dragging").addClass("part");
            $part.appendTo($(this));
            $part.resizable({
                containment: "#board",
                aspectRatio: true
            });
            $part.draggable({
                tolerance: 'fit',
                revert: 'invalid', //resterà non valido finchè non droppo in un punto valido
                containment: "#workarea",
                stop: function () {
                    var top2 = ui.position.top;
                    var left2 = ui.position.left;
                    $("#workarea").append('<div>spostata</div>');
                    $(this).draggable('option', 'revert', 'invalid'); //quando lo lascio torna indietro perche' il revert è invalid'
                }
            });
            $part.droppable({
                greedy: true,
                //tolerance: 'intersect',
                drop: function (event, ui) {
                    if (!$(ui.helper).hasClass('part')) {
                        ui.draggable.draggable('option', 'revert', true);
                    }
                }
            });
        };
        inserite++;
        $("#workarea").append('<div>' + top + '-' + left + '--' + inserite + '</div>');
    }
});

You could tidy things significantly by defining the option-maps in an outer scope, but they must be applied inside.

I would probably do something like this :

var inserite = 0;

part_options = {
    resizable: function(ui) {
        return {
            ...
        }
    },
    draggable: function(ui) {
        return {
            ...
        }
    },
    droppable: function(ui) {
        return {
            ...
        }
    }
};


$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if(ui.helper.hasClass('drag') ) {
            var $part = ui.helper.clone().removeClass("drag ui-draggable-dragging").addClass("part");
            $part.appendTo($(this));
            $part.resizable(part_options.resizable.call(this, ui));
            $part.draggable(part_options.draggable.call(this, ui));
            $part.droppable(part_options.droppable.call(this, ui));
            //or one long chained command if you prefer.
        };
        inserite++;
        $("#workarea").append('<div>' + top + '-' + left + '--' + inserite + '</div>');
    }
});