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 moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted.

The doodads are also set to clone as a user can have more than one of the item in the box if they so desire.

So the two parts are, set up the doodad list (already done), and then make it draggable so that it can be dragged into the droppable div box. Then the second part is that once it's in the div box, it must be draggable again, not clonable, and also contained in the box.

Here's my JS code:

$(document).ready(function() {

function MakeDraggable(item) {
    item.draggable({
        revert : "invalid"
    });
}


$(".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) {

        var droppedItem = $(ui.draggable).clone();
        //droppedItem.class = ".dropped";
        droppedItem.draggable();
        //ui.draggable.draggable('option', 'revert', false);
        //droppedItem.draggable();
        $(this).append(droppedItem);
    }
});

});

I've tried many things. I tried changing the element's ID to something else so that it can take on that class' draggable attributes. I've also tried programming it within the drop function, but I'm having issues.

I have no idea how to refer to the draggable element just dropped in order to manipulate it. I was told it was $(ui.draggable), or $(ui.draggable).clone(), but when I try referring to that and calling draggable on it with my desired options, it doesn't work. The best I've gotten was that it was draggable after dropping, but it kept duplicating itself and was not contained within the box.

Any help would be greatly appreciated, and I am new to all of this stuff. I did look at the JQuery API but it didn't help me much in this regard.

Edit:

My Html is:

<body>
    <img src="doodads/i1.gif" class="doodad">
    <img src="doodads/i2.gif" class="doodad">
    <img src="doodads/i3.gif" class="doodad">
    <img src="doodads/i4.gif" class="doodad">
    <div class="box" />
</body>

CSS is:

.box {
    width:500px;
    height:500px;
    background: orange;
}

回答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')) return
            var 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')) return
            var 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/

来源：https://stackoverflow.com/questions/18674299/constrain-draggable-element-after-it-has-been-dropped

标签

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable