Html 插入新块时如何找到插入可拖动项的位置

我正在尝试创建一个页面，其中左侧是项目列表，右侧是仪表板。我希望能够从右侧拖动项目，并将其放到仪表板视图中

使用Blazor，如何找到要插入的位置？从鼠标事件中，我可以找到屏幕和客户端X和Y，但我需要仪表板中的本地位置。我可以得到仪表板的位置并手动计算吗？有没有我不知道的助手函数

我尝试实现的示例（Azure门户仪表板）：

这里有一个画廊项目列表和一个仪表板。可以从列表中拖动项目并将其放置在仪表板中的任何位置。我能够实现同样的目标，但在获得正确的职位方面遇到了问题。

---

假设我拖动某个对象并将其放置在仪表板的0,0处。我现在希望它被放置在左上角。问题是，我怎么知道它是在0,0下降的？鼠标位置事件仅提供屏幕空间中的坐标。如何计算鼠标位置与要渲染的本地绘制位置之间的偏移量？

从…左、右拖动项目？我不确定你现在是否能用C#专门完成所有的拖放操作。但是，您可以使用JSInterop执行在C#中无法执行的操作。您可以使用ElementReference。。。但在开始编码之前，请搜索社区为这些操作创建的库。下面的文章，虽然我没有读过，但可能会为您提供解决方案：

我正在使用Blazor wasm，Net5.0

这段代码为您提供了被拖动元素的左上角坐标，该坐标与被拖放的面板相关

坐标仅在删除元素时更新，而不是在鼠标移动时更新，这样更有效。这是一个简化的代码，只是为了说明这个想法

这是代码的html部分：

<!-- This is the element to be dragged -->
<div class="dragMe" draggable="true"
     @ondragstart="@((DragEventArgs args) => OnDragStartHandler(args, 1))">

</div>

<!-- This is the panel where to drop element-->
<div class="panel"
     @ondrop="@((DragEventArgs args)=>{OnDropHandler(args,1);})"
     ondragover="event.preventDefault();"
     ondragstart="event.dataTransfer.setData('',event.target.id)">
</div>
<!-- This is to display the coordinates on drop -->
<h5>Element was click on coordinates:</h5>
<p>(@_mouseRelativeToDraggedElementX,@_mouseRelativeToDraggedElementY)</p>
<h5>Dragged Element Top Right Corner relative to The Panel:</h5>
<p><strong>(@_topLeftCornerRelativeToPanelX,@_topLeftCorderRelativeToPanelY)</strong></p>

---

谢谢你的链接，但这篇文章只展示了如何将东西放入容器中。我想将它设置为容器中的一个特定位置。在C#中，拖放绝对是100%可能的，因为拖放是HTML5功能。容器中的特定位置是什么意思？检查这是否有帮助我尝试更新我的问题以使其更清楚。我看了这个例子，看起来问题是通过有多个放置区解决的。我已经考虑过这一点，但如果可能的话，我希望避免。我更喜欢在我设置物品位置的大落差区域。

  /// <summary>
    /// Mouse coordinates relative to the element being dragged top left corner
    /// </summary>
    double _mouseRelativeToDraggedElementX = 0;
    double _mouseRelativeToDraggedElementY = 0;

    /// <summary>
    /// Coordinates of the element's top-left corder when it was dropped.
    /// Relative to the panel. 
    /// </summary>
    double _topLeftCornerRelativeToPanelX = 0;
    double _topLeftCorderRelativeToPanelY = 0;

    /// <summary>
    /// Use this if you need to identify the panel where the drop event happened.
    /// </summary>
    int _panelId = -1;

    /// <summary>
    /// Use this if you want to know the element where the drag start happened.
    /// </summary>
    int _elementId = -1;

    /// <summary>
    /// Handles OnDrag event
    /// </summary>
    /// <param name="args"></param>
    /// <param name="elementId"></param>
    private void OnDragStartHandler(DragEventArgs args, int elementId)
    {
    // When the drag action starts, you record the coordinates of the mouse relative to the
    // top-left corner
    // of the element being dragged.
        _mouseRelativeToDraggedElementX = args.OffsetX;

        _mouseRelativeToDraggedElementY = args.OffsetY;

        _elementId = elementId;
    }

    /// <summary>
    /// Handles OnDrop event
    /// </summary>
    /// <param name="args"></param>
    /// <param name="panelId"></param>
    private void OnDropHandler(DragEventArgs args, int panelId)
    {
        // Calculate the coordinates of the dragged element's top-left corner 
        // relative to the panel top-left corner.

        // Offset gets you the coordinates of the mouse in relation to the panel

        // _mouseRelativeToDraggedElement was set using the DragStart handler, 
        // this are the coordinates of the mouse in relation to the top-left corner
        // of the element being dragged.

        
        _topLeftCornerRelativeToPanelX = args.OffsetX - _mouseRelativeToDraggedElementX;

        _topLeftCorderRelativeToPanelY = args.OffsetY - _mouseRelativeToDraggedElementY;

        _panelId = panelId;

    }

.dragMe {
    width: 100px;
    height: 50px;
    background-color: blue;
}

.panel {
    margin-top: 10px;
    height: 300px;
    width: 400px;
    border: solid red;
}