Dynamic Accept

HTML

<div id="container">
    <div class="dropbox" data-drop-id="db01"></div>
    <div class="dropbox" data-drop-id="db02"></div>
    <div class="dropbox" data-drop-id="db03"></div>
    <div class="dropbox" data-drop-id="db04"></div>
    <div class="dragbox" data-drag-id="db01"></div>
    <div class="dragbox" data-drag-id="db02"></div>
    <div class="dragbox" data-drag-id="db03"></div>
    <div class="dragbox" data-drag-id="db04"></div>
</div>

CSS

.dropbox {
    height:120px;
    width:120px;
    background:green;
    float:left;
    margin:10px;
}
#container {
    background:yellow;
}
.dragbox {
    height:100px;
    width:100px;
    background:red;
    margin:10px;
}

JavaScript

$(".dragbox").draggable();

$(".dropbox").droppable({
    accept: function (myDragBox) {
        var id_group_drop, id_group_drag;
        //get the "id_group" stored in a data-attribute of the draggable
        id_group_drag = $(myDragBox).attr("data-drag-id");
        //get the "id_group" stored in a data-attribute of the droppable
        id_group_drop = $(this).attr("data-drop-id");
        //compare the id_groups, return true if they match or false otherwise
        return id_group_drop == id_group_drag;
    },
    drop: function (event, ui) {
        $(this)
            .addClass("ui-state-highlight")
            .html("Dropped!");
    }
});