You can read more about it on these SO questions dealing with `conditional revert` ([here][SO1], [here][SO2], and [here][SO3]), but this is different enough to warrant it's own question.

Basically you want to set the [`revert option`][revert] to `'invalid'` on your [`.draggable()`][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()`][droppable] you can set what's considered valid for a drop using the [`accept option`][accept].  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][fiddle]
====

Here's a playful demo:

[Fun Fruit Mix and Match Example][fun]
====

[revert]: http://jqueryui.com/droppable/#revert
[draggable]: http://jqueryui.com/draggable/
[droppable]: http://jqueryui.com/droppable/
[accept]: http://api.jqueryui.com/droppable/#option-accept
[SO1]: https://stackoverflow.com/q/4302882/1366033
[SO2]: https://stackoverflow.com/q/3088485/1366033
[SO3]: https://stackoverflow.com/q/1444469/1366033
[fiddle]: http://jsfiddle.net/KyleMit/Wdyd6/
[fun]: http://jsfiddle.net/KyleMit/Wdyd6/3/

In html I have a list of 10 draggable `div`s called *piles* and another list of 10 droppable `div`s called *stacks*. Each *pile* will have unique id that will match with one of the *stack* divs.


* If the *pile* **does not** match with the *stack* the draggable div should revert to its default position.
* If the pile **does** match with the *stack* the draggable div will be placed inside that stack.


>     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**