Drop once

HTML

<div id="cell-0" class="cell"><div class="item">Drag me</div></div>
<div id="cell-1" class="cell"><div class="item">Drag me</div></div>
<div id="cell-2" class="cell"></div>
<div id="cell-3" class="cell"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Special+Elite);

div.cell {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    margin: 10px auto;
    box-shadow: 0 0 10px #ccc;
    position: relative;
}

div.cell.item-over {
    background-color: #f0e68c;
}

div.item {
    width: 100px;
    height: 30px;
    margin: -25px auto auto -60px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #ff6347;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
    font-family: 'Special Elite', helvetica, sans-serif;
    cursor: move;
    z-index: 5000;
}

JavaScript

$(function() {
    $('.item').draggable({
        helper: 'clone',
        opacity: 0.5
    });
    $('.cell').droppable({
        hoverClass: 'item-over',
        drop: function (event, ui) {
            ui.draggable.parent().droppable({disabled: false});
            ui.draggable.appendTo(this);
            $(this).droppable({disabled: true});
        },
        disabled: true
    });
    $('.cell:empty').droppable ({disabled: false});
});