php - 不掉在其他拖拽上

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));
            }
        });
    });​

如何在其他 .drag 上禁用掉线的 .drag？例如，如果我将红色框放在字段a1上，则绿色和蓝色框不应放在从 a1 到 a4 的字段上。

Answer 1

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

            }
        });
    });​