Blazor：拖放列表元素

Question

我想知道如何绑定拖放事件以重新排列列表中的项目。

这是我的代码：

<PageTitle>Drag & Drop</PageTitle>

<ul style="border:1px solid black">
    @foreach (var item in Items)
    {
        <li draggable="true" @* draggable *@
            @key=@item.Id
            id="@item.Id"              
            @* how to bind drag events? *@
        >@item.Label</li>
    }
</ul>

@code {
    public class Item
    {
        public int Id {get; set;}
        public string Label {get; set; } = default!;
    }
    public List<Item> Items = new() {
        new Item(){Id= 1, Label = "hi 1"},
        new Item(){Id= 2, Label = "hi 2"},
        new Item(){Id= 3, Label = "hi 3"},
        new Item(){Id= 4, Label = "Move me!"},
    };

}

Answer 1

在这里，我仅使用 Blazor 演示一些基本的拖放 html5 事件处理操作：

这是代码，不言自明。

@page "/"

<PageTitle>Drag & Drop Sample</PageTitle>

<ul style="border:1px solid black">
    @foreach (var item in Items)
    {
        <li draggable="true"
            class="@(DragEnter==item?"inserting":"")"
            @key=@item.Id
            id="@item.Id"              
            ondragover="event.preventDefault();"
            @ondragstart="@( (e) => hondragstart(e, item))"
            @ondrop="@( () => hondropOverAFriend(item))"
            @ondragenter="@( ()=> hondragenter(item) )"
            @ondragend="@( ()=> hondragend() )"
        >@item.Label</li>
    }
    <div style="height: 1.5em;" 
        ondragover="event.preventDefault();"
        @ondrop="hondropBotton"
        @ondragenter="hondragenterBotton"
    />
</ul>

<style>
    .inserting
    {
        border-top: 1px solid black;
        margin-top: 5px;
    }
</style>

@code {
    public class Item
    {
        public int Id {get; set;}
        public string Label {get; set; } = default!;
    }
    public List<Item> Items = new() {
        new Item(){Id= 1, Label = "hi 1"},
        new Item(){Id= 2, Label = "hi 2"},
        new Item(){Id= 3, Label = "hi 3"},
        new Item(){Id= 4, Label = "Move me!"},
    };
    public void  hondropOverAFriend(Item friend)
    {
        DragEnter=null;
        if (DraggedItem == null) return;
        if (DraggedItem == friend) return;
        var friendposition = Items.IndexOf(friend);
        Items.Insert(friendposition, DraggedItem!);
        DraggedItem=null;
    }
    public void  hondropBotton()
    {
        DragEnter=null;
        if (DraggedItem == null) return;
        Items.Add(DraggedItem!);
        DraggedItem=null;
    }
    public void  hondragstart(DragEventArgs e, Item item)
    {
        e.DataTransfer.EffectAllowed = "move"; //does't run
        DraggedItem = item;
        DraggedItemPosition = Items.IndexOf(item);
        Items.Remove(DraggedItem!);
    }    
    public void  hondragenter(Item item)
        =>
        DragEnter = item;    
    public void  hondragenterBotton()
        =>
        DragEnter = null;
    public void  hondragend()
    {
        // never fired IDK why
        if (DraggedItem == null) return;        
        DragEnter = null;
        Items.Insert(DraggedItemPosition, DraggedItem!);        
    }
    private Item? DraggedItem;
    private int DraggedItemPosition;
    private Item? DragEnter;
}

免责声明

有些事情我不知道如果没有 JSInterop 该怎么做，例如，我无法更改EffectAllowed或设置DataTransfer. 人们，可以自由地改进代码！