Dynamic Accept

by Behseini

HTML

<div id="container">
    <div class="dropbox" id="dropboxt0"></div>
    <div class="dropbox" id="dropboxe1"></div>
    <div class="dropbox" id="dropboxs2"></div>
    <div class="dropbox" id="dropboxt3"></div>
    
    <div class="dragbox" id="dragboxt0"></div>
    <div class="dragbox" id="dragboxt1"></div>
    <div class="dragbox" id="dragboxt2"></div>
    <div class="dragbox" id="dragboxt3"></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:   $(this).attr('id'),
    drop: function (event, ui) {
        $(this)
            .addClass("ui-state-highlight")
            .html("Dropped!");
    }
});