How to find position to insert draggable item at when inserting in a new block

问题

I am trying to create a page where I have a list of items to the left and a dashboard on the right. I want to be able to drag an item from the right and drop it in the dashboard view.

Using Blazor, how do I fint the position to insert at? From the mouse event I can find screen and Client X and Y, but I need the local position within my dashboard. Can I get the position of the dashboard and manually do the math? Is there any helper functions I dont know about?

Example of what I am trying to achieve (Azure portal dashboard):

So here there is a list of gallery items and a dashboard. An item can be dragged from the list and placed anywhere in the dashboard. I am able to achieve the same thing, but is having problems with getting the position right. Say I drag something in and drop it at 0,0 in the dashboard. I now expect it to be placed at the top left corner. The problem is, how to I know that it was dropped at 0,0? The mouse position event only provides the coordinates in screen space. How do I calculate the offset between the mouse position and the local draw position where I want it rendered?

回答1:

drag an item from the...left, right ? I'm not sure if currently you can do all the dragging and dropping exclusively in C#. However, you may use JSInterop to perform actions you cannot do in C#. You can use ElementReference... But before you start coding, search for libraries created by the community for these actions. The following article, though I did not read it, may provide you with the solution : https://chrissainty.com/investigating-drag-and-drop-with-blazor/

回答2:

I am working with Blazor wasm, Net5.0

This code gives you the top-left corner coordinates of the element being dragged, in relation to the panel were it was dropped.

The coordinates are updated only when the element is dropped, not on mouse move, which is more efficient. This is a simplified code just to show the idea.

This is the html part of the code:

<!-- 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>

This is the C# code part of the component:

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

    }

This are the css styles:

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

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

来源：https://stackoverflow.com/questions/58530001/how-to-find-position-to-insert-draggable-item-at-when-inserting-in-a-new-block

标签

html

css

razor

blazor