Blazor Table Rows Drag drop, но только захват изображения

Question

Я построил логи c в своем приложении Blazor, чтобы можно было перетаскивать строки в таблице, чтобы эффективно переупорядочивать строки. Logi c прекрасно работает, но я не хочу, чтобы вся строка была «сцепляемой», только изображение ручки слева от строки (чтобы строка не перетаскивалась, если текстовое поле случайно перетаскивается)

Логика c все работает, но анимация перетаскивания показывает только перетаскиваемое перетаскиваемое изображение, поэтому его нужно перетаскивать только в пределах этого изображения. В любом случае я могу изменить это так, чтобы при перетаскивании все еще отображался весь ряд? По сути, это просто расположение ручки, которую я хочу установить для перетаскивания строки.

Это мой текущий код:

<table class="table mt-4" ondragover="event.preventDefault();">
    <thead>
        <tr>
            <th>#</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>Unit Cost</th>
            <th>Taxes</th>
            <th class="text-right">Total</th>
        </tr>
    </thead>
    <tbody>

        @if (order.OrderLines != null)
        {
            foreach (var line in order.OrderLines.OrderBy(x => x.SortIndex))
            {
                <tr>

                    <div id="dragdiv" class="dragula-handle" draggable="true" @ondrop="@(()=> Drop(line))" @ondrag="@(()=> StartDrag(line))" @key="line.Id"></div>

                    <td>
                        @line.SortIndex
                    </td>

                    <td>
                        <InputText id="item-desc" @bind-Value="line.Description" class="form-control form-control-sm" disabled="@FormDisabled" placeholder="Description" />
                    </td>

                    <td>
                        <InputNumber id="item-qty" @bind-Value="line.Quantity" class="form-control form-control-sm" disabled="@FormDisabled" placeholder="Qty" />
                    </td>

                    <td>
                        <InputNumber id="item-unit-cost" @bind-Value="line.AmountPerUnit" class="form-control form-control-sm" disabled="@FormDisabled" placeholder="Unit Cost" />
                    </td>

                    <td>
                        <Order_TaxCodesSelect @bind-OrderTaxLines="line.TaxLines" />
                    </td>


                    <td class="text-right">
                        @if (line.TotalAmountIncl != 0)
                        {
                            @line.TotalAmountIncl
                        }
                        else
                        {
                            <div>0.00</div>
                        }

                    </td>

                    <td class="text-right">
                        <button type="button" class="btn btn-danger" @onclick="@(() => DeleteLine(line.SortIndex))"><i class="mdi mdi-window-close"></i> </button>

                    </td>



                </tr>
            }
        }

        <button type="button" class="btn btn-success" @onclick="CreateNewLine"><i class="mdi mdi-plus-circle"></i> </button>

    </tbody>
</table>