【Blazor】 ドラッグ＆ドロップの実装サンプル

以下のコードは、Blazorでドラッグ＆ドロップ機能の実装例です。

@page "/"
@using System.Diagnostics

@foreach (var item in _items)
{
    <div class="drag-and-drop-item"
         draggable="true"
         ondragover="event.preventDefault();"
         @ondragstart="() => DragStart(_items.IndexOf(item))"
         @ondrop="() => Drop(_items.IndexOf(item))">

        <span class="w-100">
            @item
        </span>
    </div>
}

@code {
    /// <summary>
    /// 項目リスト
    /// </summary>
    private List<string> _items = default!;

    /// <summary>
    /// ドラッグ中の項目のインデックス
    /// </summary>
    private int _draggingItemIndex;

    /// <summary>
    /// 初期化
    /// </summary>
    protected override void OnInitialized()
    {
        _items = new List<string>()
        {
            "apple",
            "orange",
            "banana"
        };
    }

    /// <summary>
    /// ドラッグ開始
    /// </summary>
    /// <param name="dragIndex">ドラッグするインデックス</param>
    private void DragStart(int dragIndex)
    {
        Debug.WriteLine("DragStart");
        _draggingItemIndex = dragIndex;
    }

    /// <summary>
    /// ドロップ
    /// </summary>
    /// <param name="dropIndex">drop先のインデックス</param>
    private void Drop(int dropIndex)
    {
        Debug.WriteLine("Drop");

        // ドラッグ中の項目とドロップ先の項目のインデックスが異なる場合は、交換する
        if (_draggingItemIndex != dropIndex)
        {
            SwapElements(_items, _draggingItemIndex, dropIndex);
        }
    }

    /// <summary>
    /// リストの要素を交換
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="list"></param>
    /// <param name="index1"></param>
    /// <param name="index2"></param>
    private void SwapElements<T>(List<T> list, int index1, int index2)
    {
        T temp = list[index1];
        list[index1] = list[index2];
        list[index2] = temp;
    }
}

.drag-and-drop-item {
    display: inline-flex;
    align-items: center;
    border: 1px solid #a57f39;
    border-radius: 10px;
    padding: 0.1rem 0.25rem;
    background-color: #ffeac4;
    font-size: 0.875rem;
    margin-right: 0.25rem;
}

div要素のdraggable="true"は、ユーザーがドラッグ可能にするために設定しています。 また、ondragover="event.preventDefault();"は、div要素デフォルトの動作をキャンセルし、この要素がドロップを受け入れ可能にします。

@ondragstartは、ユーザーがドラッグを開始した際に発火するイベントハンドラです。 このイベントハンドラに登録しているDragStartメソッドで、ドラッグ中の要素のインデックスを_draggingItemIndexに保持するようにしています。

@ondropは、要素が他のドラッグ可能な要素の上にドロップされた際に発火するイベントハンドラです。 このイベントハンドラに登録しているDropメソッドで、ドロップ元とドロップ先のインデックスを比較して、可能なら交換する処理を行っています。

実際の動作は、以下のようになります。ドラッグ＆ドロップできることを確認してください。

今回は簡単にですが、ドラッグ＆ドロップを使ったコンポーネントについて紹介しました。