使用 Blazor 在拖放时插入新的部分/组件答案

【问题标题】：Insert a new section/component on drag and drop with Blazor使用 Blazor 在拖放时插入新的部分/组件
【发布时间】：2021-03-25 09:37:37
【问题描述】：

我正在尝试使一个新的部分/div/组件在放置操作时出现在放置区域中。

例如，我制作了两个 blazor 组件 <Calculator/> 和 <Counter />，它们应该放在 dropzone 的 div 中，具体取决于拖动哪个组件。到目前为止，我有两个可拖动的元素：

@page "/"
<!-- draggable items-->
<ul>
    <li draggable="true" @ondragstart="OnDragStart">drag Counter</li>
    <li draggable="true" @ondragstart="OnDragStart">drag Calculator</li>
...
</ul>

然后我有多个 div，其中包括 dropzone div。根据我将它放在哪个区域，应该在那里呈现新组件：

<!-- drop zones-->
<div class="bg-primary">
    <div class="row one">Test</div>
    <div dropzone="move" class="row space" 
         @ondrop="OnDrop" ondragover="event.preventDefault();"></div>
    <div class="row two"></div>
    <div dropzone="move1" class="row space" 
         @ondrop="OnDrop" ondragover="event.preventDefault();"></div>
    <div class="row three">Test</div>
</div>

我的代码还没有做太多，只是表明正在发生什么动作：

<div>@DragStatus</div>

@code {
    public string DragStatus = "test...";

    public void OnDragStart()
    {
        DragStatus = "started";
    }
    public void OnDrop()
    {
        DragStatus = "dropped";  
    }
}

如何指示两个元素中的哪一个被占用/拖动？

【问题讨论】：

标签： c# drag-and-drop blazor webassembly .net-5

【解决方案1】：

我找到了解决办法。它比专业更实用。只是提供一个想法。

在拖动开始事件中，您可以将拖动对象的变量传递给函数：

<li draggable="true" @ondragstart='(() => OnDragStart("Counter"))'>drag Counter</li>
<li draggable="true" @ondragstart='(() => OnDragStart("Calculator"))'>drag Calculator</li>

那么我们需要知道这个物品被丢弃在哪里：

<div dropzone="move1" class="row space" 
@ondrop='(() => OnDrop("first"))' ondragover="event.preventDefault();">B</div>
<div class="row two"></div>

从上面我们得到两个值{first, calculator}，因此可以将其存储到元组中：

    public List<Tuple<string, string>> myitems { get; set; }
    = new List<Tuple<string, string>>();
    public string place { get; set; } = "";
    public string DragStatus = "test...";

只有当一个项目被拖放时，两个函数才会保存这个数据：

    public void OnDragStart(string taken_a)
    {
        DragStatus = taken_a; //what is being dragged

    }
    public void OnDrop(string place_a)
    {
        place = place_a;
        var item = new Tuple<string, string>(place, DragStatus);
        myitems.Add(item);
    }

最后我们可以遍历 dropzone div 中的元组列表：

    <div dropzone="move1" class="row space"
         @ondrop='(() => OnDrop("first"))' ondragover="event.preventDefault();">

        @foreach (var item in myitems)
        {
            @if (item.Item1 == "first")
            {
                @if (item.Item2 == "Calculator")
                {
                    <Calculator />
                }
                @if (item.Item2 == "Counter")
                {
                    <Counter />
                }
            }
        }
    </div>

它可能适用于一些小数据集，因为您需要在每个 dropzone 下放置这样的循环。

否则，其中一种专业的方法似乎是渲染树。一个很好的资源： https://chrissainty.com/building-components-via-rendertreebuilder/

【讨论】：