CODEWITHSUNDEEP
jqueryjquery-uidroppable
santa
santa

Reputation: 12512

jQuery UI droppable question

I am in a final stage of getting my app ready and am stuck on a couple of items.

  1. When an item is dragged from left column into main area it needs to create a new group box, which it does OK. But if I drag another item into this newly created box, instead of staying there it creates another new box...

  2. I drag items into pre-defined boxes. Then I decide to create a new box by dragging an item from pre=defined box into the yellow area. It does not, but floats back into the box. It must be able to create a new box whether it is dragged from the left column or from any other box in the main area.

Would appreciate a fresh pair of eyes taking a look at it and letting me know what am I missing here.

Upvotes: 1

Views: 470

Answers (1)

marcosfromero
marcosfromero

Reputation: 2853

The first problem is solved if you set the greedy option of newStack droppable to true. This prevents drop events to propagate to other container droppables like, in your case, #dropZone, that was creating a new stack:

newStack.droppable({
    tolerance: "intersect",
    accept: ".card",
--> greedy: true,  <--
    drop: function(event, ui) {
            card = ui.draggable;
            putCardIntoStack(card,stackId);
    }
});

The second problem is solved if you change the accept option of #dropZone droppable just to .card. This is because cards on stacks have the class name stackcard, which surely makes the function return false:

$("#dropZone").droppable({
    /*accept: '.card', function(dropElem) {
                return (!dropElem.hasClass("stackcard"));
    },*/
--> accept: '.card' <--
    ...

Upvotes: 1

Related Questions