javascript - 如何为 droppable td 制定接受条件以仅接受同一行中的类？

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

上面的可删除 td 必须只接受同一行中的类。我可以为可删除 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 必须像这样工作:用户可以将卡片从“可用项目”列移动到“正在进行”列，并且必须位于同一行。

Answer 1

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

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