Question

<div class="drag" style="height: 80px; width: 30px; background-color: red"></div>
<div class="drag" style="height: 30px; width: 30px; background-color: green"></div>
<div class="drag" style="height: 120px; width: 30px; background-color: blue"></div>

<table id="droppable" border="1">
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

​    $(function() {
        $( ".drag" ).draggable();
        $( "#droppable td" ).droppable({
            drop: function( event, ui ) {
                console.log($(this));
            }
        });
    });​

How can i disable dropped .drag on other .drag? For example if i drop red box on field a1 then box green and blue shouldn’t drop on fields from a1 to a4.

Answer 1

$(function() {
        $( ".drag" ).draggable();
        $("#droppable td:not(.notAvailable)").droppable({
            drop: function( event, ui ) {
                console.log($(this));
                //add class notAvailable to current td

            }
        });
    });​