在对话框拖动上更改光标

Question

我知道至少有两种方法可以做到这一点：Javascript和C#。我想做C#。所以我找到了一个示例来执行对话框拖动 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;
}

员工剃刀：

<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