如何为 droppable td 设置接受条件以仅接受同一行中的 class？

Question

我有这个可掉落的 td。

$('#ScrumTable td').droppable({
    hoverClass: 'ondrop',
    accept: '.card',
    drop: function(event, ui){
        $(this).append($(ui.draggable));
        ui.draggable.css("top",$(this).css("top"))
        ui.draggable.css("left",$(this).css("left"))
        if(  parseInt( $(this).index() ) + 1 == 1){
            ui.draggable.addClass('backlog-card');
            ui.draggable.removeClass('inprogress-card');
            ui.draggable.removeClass('tovalidate-card');
        }
        else if(  parseInt( $(this).index() ) + 1 == 2){
            ui.draggable.addClass('inprogress-card');
            ui.draggable.removeClass('backlog-card');
            ui.draggable.removeClass('tovalidate-card');
        }
        else if(  parseInt( $(this).index() ) + 1 == 3){
            ui.draggable.addClass('tovalidate-card');
            ui.draggable.removeClass('inprogress-card');
            ui.draggable.removeClass('backlog-card');
        }
    }
});

上面的 droppable td 必须只接受同一行内的 class。我可以为可投放 td 的接受属性设置什么条件？

这是我的 html:

<table id="ScrumTable">
    <thead>
        <th>Available Items</th>
        <th>On going </th>
    </thead>
    <tbody>
        <tr> 
            <td> <div class="card"> sample </div></td>
            <td>col 2 </td>
        <tr> 
            <td>sample2</td>
            <td>col 2</td>
        </tr>
    </tbody>
</table>

html 必须这样工作：用户可以将卡片从 "available items" 列移动到 "on going" 列，并且必须在同一行。

Answer 1

经过一番尝试，我终于找到了正确的方法。

accept: function(draggable){
    if($(draggable).parent().parent().index() === $(this).parent().index())
    {
        return true;
    }
}

如何为 droppable td 设置接受条件以仅接受同一行中的 class？

How to make an accept condition for droppable td to accept only the class within the same row?

html

javascript

jquery

jquery-ui

jquery-ui-droppable