CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
solomon vincent
solomon vincent

Reputation: 36

jquery drag and drop revert options

In html I have a list of 10 draggable divs called piles and another list of 10 droppable divs called stacks. Each pile will have unique id that will match with one of the stack divs.

After the pile has matched the stack when i drag out the matched
*pile* from that stack it should automatically reposition to the exact list of *piles**

Upvotes: 1

Views: 1490

Answers (1)

KyleMit
KyleMit

Reputation: 29879

You can read more about it on these SO questions dealing with conditional revert (here, here, and here), but this is different enough to warrant it's own question.

Basically you want to set the revert option to 'invalid' on your .draggable() object, and it'll go back if it wasn't successfully dropped onto a droppable, like this:

$(".draggable").draggable({ revert: 'invalid' });

Then in your .droppable() you can set what's considered valid for a drop using the accept option. Accept can be implemented as a function that returns true or false based on whether or not it will accept elements. Our droppable declaration will look like this:

$(".droppable").droppable({ 
    accept: function(drag) {
        var dropId = $(this).attr('data-id');
        var dragId = $(drag).attr('data-id');
        return dropId === dragId;
    }
});

In this example, i'm using data attributes to match drag and drop elements, but you can do it however you like. Here's some sample HTML:

<div class="draggable" data-id='a'>draggable a</div>
<div class="droppable" data-id='a'>droppable a</div>

Here's a serious demo:

jsFiddle

Here's a playful demo:

Fun Fruit Mix and Match Example

Upvotes: 1

Related Questions