Drag and drop match up

by DOK_UA

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="draggable" data-id='a'>draggable a</div>
<div class="droppable" data-id='a'>droppable a</div>
<br/>
<div class="draggable" data-id='b'>draggable b</div>
<div class="droppable" data-id='b'>droppable b</div>






<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>About this SO Question: <a href='http://stackoverflow.com/q/19411125/1366033'>jquery drag and drop revert option</a>

    <br/>jQuery API: <a href='http://api.jqueryui.com/droppable/#option-accept'>Droppable Accept</a>
    <br/>jQuery API: <a href='http://api.jqueryui.com/draggable/#option-revert'>Draggable Revert</a>

    <br/>
    <div>

CSS

.draggable, .droppable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    display: inline-block;
    margin: 10px;
    border: 1px solid grey;
    background: white;
}
.draggable {
    height:50px;

}

JavaScript

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