在对话框拖动上更改光标

Question

我知道至少有两种方法可以做到这一点：Javascript 和 C#。我想用 C# 来做。所以我找到了一个示例来执行对话框拖动 C# 方式。但是我想在拖动时更改光标。如何实现？

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>

Answer 1

避免拖放方法并使用鼠标事件对其进行编码更容易

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>

我们在要移动的元素上有 onmousedown 和 onmouseup，在背景元素上有 onmousemove。然后我们可以使用 CSS 在“拖动”的同时改变光标。

试试看：https://blazorrepl.telerik.com/wvPvmuYo40iNCUkS45

在对话框拖动上更改光标

Change cursor on Dialog Dragging

asp.net

blazor

blazor-server-side