Mudblazor 表格可拖动行

Question

I'm a newbie looking for some guidance on how to implement draggable rows on a Mudblazor table. I didn't see any in Mudblazor's API docs regarding this subject. I'd prefer to not use JS if possible. Does anyone have any insight on how I would do this? Or any resources I could read?

Answer 1

There isn't a perfect solution out of the box. You can try playing with Dropzone and SimpleTable , but this will separate header from rows, so you will have to find the correct sizes for colums.

<MudDropContainer T="string" Items="@rows" ItemsSelector="@((item,dropzone) => true)" Class="d-flex flex-wrap flex-grow-1">
    <ChildContent>
        <MudSimpleTable Style="overflow-x: auto;">
            <thead>
                <tr><th>ID</th></tr>
            </thead>
            <tbody>
                <MudDropZone T="string" Identifier="dropzone" Class="flex-grow-1" AllowReorder="true" />
            </tbody>
        </MudSimpleTable>
    </ChildContent>
    <ItemRenderer>
        <tr>
            @foreach (var x in @context.Split())
            {
                <td>@x</td>
            }
        </tr>
    </ItemRenderer>
</MudDropContainer>

@code {
    string[] rows = {
        "1","2","3","4","5","6","7","8","9","10"
    };
}

Try it here: https://try.mudblazor.com/snippet/wkcxYFRlqLyfsQlu