[英]Blazor: Drag & Drop list elements
我想知道如何绑定拖放事件以重新排列列表中的项目。
这是我的代码:
<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!"},
};
}
这里我举例说明了一些基本的拖放 html5 事件处理操作,仅使用 Blazor:
这是代码,不言自明。
@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
上设置数据。 人们,可以自由地改进代码!
如果您将 @ondragend="@(()=> hondragend())" 更改为 @ondragend="hondragend" 它会在您的代码中触发事件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.