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

            }
        });
    });

没有放弃其他阻力

1 个答案: