CODEWITHSUNDEEP
jqueryjquery-ui-draggabledroppable
boggsey
boggsey

Reputation: 154

Disable specific jQuery draggable out of many after that specific item has been dropped

I'm trying to use jQuery draggable and droppable to compare results of a search. Basically, I am limiting the compare to 5 items. So, I have 5 droppable boxes and a number of draggable images that will go into those boxes. I am trying to ensure that when a droppable box is full it cant be refilled and the item that was dragged into it can not be dragged again. The draggable item reverts to a disabled state. I've managed to disable the last dropped item, but the second result can't be dragged at all. So, my question is: How can I disable dragging for a specific image after that image has been dropped, and still allow other results to be put into the remaining boxes? Also, the filled droppable div should not be able to contain more than one image. There is alot of code involved so, you can find a demo here http://jsfiddle.net/SeasonEnds/VNzrB/

Upvotes: 1

Views: 1766

Answers (1)

Jasper
Jasper

Reputation: 75993

You have multiple elements with the ID of productimage. All I did was change each instance of id="productimage" to class="productimage" and then changed your JS to select based on class rather than by ID. When a browser looks for an element by ID, once it's found, the browser stops looking because it's assumed that each ID is unique:

var $gallery = $(".productimage"),

...

accept: ".productimage > .icon",

http://jsfiddle.net/jasper/VNzrB/1/

That will make it so each of the draggable elements will be drag-able. To make it so you can only place a single draggable in a droppable element, you can disable each droppable element as something is dropped into it:

    drop: function(event, ui) {
        deleteImage(ui.helper);
        $(ui.draggable).draggable('disable');

        //disable the droppable element that just had a draggable dropped into it
        $(this).droppable('disable');
    }

Here is a demo: http://jsfiddle.net/jasper/VNzrB/3/

Update

To only change the height/width of the cloned draggable helper, you can target it with: $(ui.helper).css(...);.

Change:

    start: function() {

        $(".myCheckbox").prop("checked", true);
        $(".ui-draggable").not(this).css({
            height: 50,
            width: 50
        });
    },

To:

    start: function(event, ui) {

        $(".myCheckbox").prop("checked", true);
        $(ui.helper).css({
            height: 50,
            width: 50
        });
    }

Note that you have to

See this update in action here: http://jsfiddle.net/jasper/VNzrB/4/

Upvotes: 2

Related Questions