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 vi

Solution 1:

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 --><divclass="dragMe"draggable="true"
     @ondragstart="@((DragEventArgs args) => OnDragStartHandler(args, 1))"></div><!-- This is the panel where to drop element--><divclass="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>privatevoidOnDragStartHandler(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>privatevoidOnDropHandler(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;
}