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必须只接受同一行内的类。我可以将什么条件放入droppable td的accept属性？

这是我的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;
    }
}

如何使droppable td的accept条件只接受同一行中的类？

1 个答案: