html - 插入新 block 时如何找到插入可拖动元素的位置

Question

我正在尝试创建一个页面，其中左侧有元素列表，右侧有仪表板。我希望能够从右侧拖动一个元素并将其放到仪表板 View 中。

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

我试图实现的示例(Azure 门户仪表板):

所以这里有一个图库元素列表和一个仪表板。可以从列表中拖动一个元素并将其放置在仪表板中的任何位置。我能够实现同样的目标，但在正确定位方面遇到了问题。假设我将某些东西拖入仪表板中的 0,0 处。我现在希望它被放置在左上角。问题是，我怎么知道它是在 0,0 处掉落的？鼠标位置事件仅提供屏幕空间中的坐标。如何计算鼠标位置和我想要渲染的本地绘图位置之间的偏移量？

Answer 1

我正在使用 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# 代码部分:

  /// <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;

    }

这是 css 样式:

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

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