您的作品的忠实粉丝。
我正在使用HTML5拖放API构建一个Blazor WASM应用程序。我遇到了一个最奇怪的问题，几个小时以来我一直在努力解决这个问题。
这个应用程序允许将对象放入"；组"；。一个组可以包含其他组，依此类推
我大部分时间都在工作，但有两个问题让我挠头。
已解决请参阅注释1(当我将一个组从下面向上拖动到另一个组中时，该组将迁移到目标中，但原始组中的子项将消失。
在我向上拖动底部组之前：
https://i.stack.imgur.com/BCsCr.png
之后：
https://i.stack.imgur.com/WIWA6.png
- 当我将一个组从上面向下拖动到另一个组时，目标组的GUID会覆盖源组，我只剩下一个组
之前：
https://i.stack.imgur.com/EuTIP.png
之后：
https://i.stack.imgur.com/26u27.png
组是橙色形状，界面是蓝色形状。它们通过Field类进行渲染。
我已经尝试了我能想到的每一种代码排列，但没有什么能让它变得更好。我一定错过了什么。
Group.razor
@inherits Item
<div id=@Uid class="tb-group tb-draggable @CssClass"
draggable = "true"
ondragover="event.preventDefault()"
@ondragstart:stopPropagation
@ondragstart="@(()=>HandleOnDragStart(this))"
@ondragend="HandleOnDragEnd"
@ondragenter="HandleOnDragEnter"
@ondragleave="HandleOnDragLeave"
@ondrop:stopPropagation
@ondrop="HandleOnDrop"
@onclick:stopPropagation
@onclick="Debug_Output">@Title : @Uid : @Parent.Uid
@foreach(Item item in Items){
if(item.GetType() == typeof(Group)){
<Group Uid=@item.Uid Title="@item.Title" Field=@Field Parent=@this></Group>
} else if(item.GetType() == typeof(Interface)){
<Interface Uid=@item.Uid Title="@item.Title" Field=@Field Parent=@this></Interface>
}
}
</div>
此代码负责OnDrop行为(HandleOnDrop(
Group.razor.cs -
public partial class Group : Item {
public List<Item> Items;
protected override void OnInitialized()
{
Items = new List<Item>();
base.OnInitialized();
}
public void HandleOnDrop(){
if(Payload.Uid != this.Uid){
Console.WriteLine("Removing item " + Payload.Uid);
Items.Add(Payload);
Payload.Parent.Items.Remove(Payload.Parent.Items.Find(x => x.Uid == Payload.Uid));
}
CssClass = "";
this.Field.Refresh();
Payload.Parent = this;
}
...
Interface.razor
@inherits Item
<div id=@Uid draggable="true" class="tb-interface tb-draggable @CssClass"
@ondragstart:stopPropagation
@ondragstart="@(()=>HandleOnDragStart(this))"
@onclick:stopPropagation>@Title : @Uid : @Parent.Uid</div>
这可能是我初始化这些组件的方式(通过构造函数(吗？也许他们被GC清理了
Field.razor.cs -
public partial class Field : Group {
protected override void OnInitialized()
{
base.OnInitialized();
}
public void AddGroup(){
Group grp = new Group();
grp.Parent = this;
Items.Add(grp);
StateHasChanged();
}
public void AddInterface(){
Interface iface = new Interface();
iface.Parent = this;
Items.Add(iface);
StateHasChanged();
}
public void Refresh(){
StateHasChanged();
}
}
我已经无计可施了。如果有人能给我一些建议，我将不胜感激。
问题#1：需要在实例化时将Items对象传递到Group
问题2：需要使用@key来维护参考