Constrain Draggable Element After It Has Been Dropped

Basically what I have is a set of doodads, and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be move

Solution 1:

You can set a class on the dropped element e.g. copied and than check if the dropped element have already that class and if so stop the cloning.

To constrain the movement inside the box you can use containment option of draggable:

Constrains dragging to within the bounds of the specified element or region.

Code:

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            if ($(ui.draggable).hasClass('copied')) returnvar droppedItem = $(ui.draggable).clone().addClass('copied');
            droppedItem.draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/ufHMm/

EDIT

To get the dropped element position we had to calculate and use it, using:

$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left

we get the helper position along its container.

Final code:

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (e, ui) {
            if ($(ui.draggable).hasClass('copied')) returnvar droppedItem = $(ui.draggable).clone().addClass('copied').css({
                position: "relative",
                top: $(ui.helper).position().top - $(this).position().top,
                left: $(ui.helper).position().left - $(this).position().left
            }).draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);

        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/ufHMm/3/