Change cursor on Dialog Dragging-CodePudding

I know there are at least two ways of doing this: Javascript and C#. I would like to do it C#. So I have found an example to perform Dialog dragging C# way. However I would like to change the cursor while dragging. How it can be achieved?

EmployeesBase.cs:

protected double startX, startY, offsetX, offsetY;

public EmployeesBase()
{
  this.employee = new Data.Employee();
  this.offsetY = 100;
}

protected void OnDragStart(DragEventArgs args)
{
  startX = args.ClientX;
  startY = args.ClientY;
}

protected void OnDragEnd(DragEventArgs args)
{
  offsetX  = args.ClientX - startX;
  offsetY  = args.ClientY - startY;
}

Employees.razor:

  <div class="modal" tabindex="-1" style="display: block; background-color: rgba(176, 176, 176, 0.4); ">
    <div class="modal-dialog">
      <div class="modal-content shadow-lg p-3 mb-5 bg-white rounded" draggable="true"
     @ondragend="OnDragEnd" @ondragstart="OnDragStart"
     style="position:absolute; top: @(offsetY)px; left: @(offsetX)px;">
        <div class="modal-header">
          <h5 class="modal-title">Add new record</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="ClosePopup">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <EditForm Model="employees" OnValidSubmit="SubmitForm">
        </EditForm>
      </div>
    </div>
  </div>

CodePudding user response：

It's easier to avoid the drag and drop method and code it using mouse events

protected double startX, startY, offsetX, offsetY=100;
protected string cursor="pointer";
protected bool isDragging=false;

protected void OnMouseDown(MouseEventArgs args)
{
  startX = args.PageX;
  startY = args.PageY;
  cursor="grab";
  isDragging = true;
}

protected void OnMouseMove(MouseEventArgs args)
{
  if (isDragging)
  {
    offsetX  = args.PageX - startX;
    offsetY  = args.PageY - startY;
    startX = args.PageX;
    startY = args.PageY;
  }
}
protected void OnMouseUp(MouseEventArgs args)
{
    isDragging = false;
    cursor="pointer";
}

<div class="modal" tabindex="-1" style="display: block; background-color: rgba(176, 176, 176, 0.4); " 
    @onmousemove="OnMouseMove">
    <div class="modal-dialog" >
        <div class="modal-content shadow-lg p-3 mb-5 bg-white rounded" 
        @onmouseup="OnMouseUp" @onmousedown="OnMouseDown" 
        style="position:absolute; top: @(offsetY)px; left: @(offsetX)px;cursor:@cursor;">
        <div class="modal-header">
            <h5 class="modal-title">Add new record</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        </div>
    </div>
</div>

We have the onmousedown and onmouseup on the element we want to move and the onmousemove on the background element. We can then use CSS to change the cursor while "dragging".

Try it out: https://blazorrepl.telerik.com/wvPvmuYo40iNCUkS45