เทคนิคการขยับแถวขึ้นลงใน Table ด้วยวิธี Drag & Drop ใน Blazor

@if (provinces != null)
{
    <table class="table table-striped" >
        <thead>
            <tr >
                <th>ลำดับ</th>
                <th>จังหวัด</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var pr in provinces)
            {
                <tr role="button" class="cursor-pointer"  >
                    <td>@pr.ID</td>
                    <td>@pr.Name</td>
                </tr>
            }
        </tbody>
    </table>
}

private List<Province> provinces = new List<Province>();

protected override void OnInitialized()
{

	provinces.AddRange(new List<Province> {
		new Province(1,"สงขลา"),
		new Province(2,"ปัตตานี"),
		new Province(3,"ยะลา"),
		new Province(4,"นราธิวาส"),
		new Province(5,"สตูล")
	});

}

public class Province
{
	public Int32 ID;
	public string Name;
	public Province(int id, string name)
	{
		ID = id;
		Name = name;
	}
}

@if (provinces != null)
{
    <table class="table table-striped" ondragover="event.preventDefault();">
        <thead>
            <tr >
                <th>ลำดับ</th>
                <th>จังหวัด</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var pr in provinces)
            {
                <tr role="button" class="cursor-pointer" draggable="true"
            @ondrop="@(()=> Drop(pr))" @ondrag="@(e => StartDrag(pr))" >
                    <td>@pr.ID</td>
                    <td>@pr.Name</td>
                </tr>
            }
        </tbody>
    </table>
}

/// <summary>
/// เก็บตำแหน่งของจังหวัดที่คลิกเลือก เมื่อเริ่ม drag
/// </summary>
/// <param name="province"></param>
private void StartDrag(Province province)
{
	currentIndex = GetIndex(province);
}

/// <summary>
/// หาตำแหน่งของจังหวัดที่อยู่จาก list
/// </summary>
/// <param name="province"></param>
/// <returns></returns>
int GetIndex(Province province)
{
	return provinces.FindIndex(p => p.ID == province.ID);
}

/// <summary>
/// เมื่อ Drop จังหวัดที่ drag มาลงในตำแหน่งที่ต้องการ
/// </summary>
/// <param name="province"></param>
void Drop(Province province)
{
	if (province != null)
	{
		// หาตำแหน่งของจังหวัดที่ถูก drop
		var index = GetIndex(province);

		// หาจังหวัดที่ถูก drag มา จาก index ที่เก็บไว้ตั้งแต่เริ่ม drag
		var current = provinces[currentIndex];

		// ลบจังหวัดที่ถูก drag มา ออกจาก list
		provinces.RemoveAt(currentIndex);

		// แทรกจังหวัดที่ถูก drag มา ลงในตำแหน่งที่ drop
		provinces.Insert(index, current);

		StateHasChanged();
	}
}