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

Question

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

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

我尝试实现的示例(Azure门户仪表板)：

​

这里有一个图库项目列表和一个仪表板。可以从列表中拖动项目并将其放置在仪表板中的任意位置。我能够做到同样的事情，但在正确的位置上遇到了问题。假设我将某物拖入并放在仪表板的0,0处。我现在希望它被放在左上角。问题是，我如何知道它是在0,0的时候丢弃的？鼠标位置事件仅提供屏幕空间中的坐标。如何计算鼠标位置和要渲染的局部绘图位置之间的偏移量？

Answer 1

从the...left拖拽一个项目，对吗？我不确定目前您是否可以只在C#中完成所有的拖放操作。但是，您可以使用JSInterop执行在C#中无法执行的操作。您可以使用ElementReference...但在开始编码之前，请搜索社区为这些操作创建的库。下面这篇文章，虽然我没有读过，但可以为您提供解决方案：https://chrissainty.com/investigating-drag-and-drop-with-blazor/

Answer 2

我正在使用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;
}