在對話框拖動上更改游標-有解無憂

我知道至少有兩種方法可以做到這一點：Javascript 和 C#。我想做 C#。所以我找到了一個例子來執行 Dialog 拖動 C# 方式。但是我想在拖動時更改游標。如何實作？

員工資料庫.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;
}

員工.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>

uj5u.com熱心網友回復：

更容易避免拖放方法并使用滑鼠事件對其進行編碼

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/361686.html

標籤：网站西装外套 blazor 服务器端

上一篇：使用VB在ASP.Net中的GridView中排序事件

下一篇：在Blazor中，有沒有辦法在不更改狀態的情況下撤消無效的用戶輸入？