在 Blazor 中实现可移动 <div>
Posted
技术标签:
【中文标题】在 Blazor 中实现可移动 <div>【英文标题】:Implementing movable <div> in Blazor 【发布时间】:2020-02-09 01:14:58 【问题描述】:我正在尝试在 Blazor 中实现为可移动的组件,但我不确定如何将 javascript 转换为 Blazor。 我通常会实现类似的目标:https://***.com/a/47596086/767942
如何处理 @onmousedown 并将其转换为 Blazor 以实现上述示例中的可移动 ?【问题讨论】:
onmousedown
在 Blazor 上可用。不需要 JS。相关***.com/questions/57306208/…更多信息:chrissainty.com/investigating-drag-and-drop-with-blazor
我刚刚采用了与您发布的示例相同的想法(如继续研究它),但两者都相当笨拙。结果不像我指出的示例那样平滑拖动。
【参考方案1】:
这是使用ondragstart
和ondragend
事件的另一种方法,我用它来制作可移动的“弹出窗口”。
<div draggable="true"
@ondragend="OnDragEnd" @ondragstart="OnDragStart"
style="position:absolute; top: @(offsetY)px; left: @(offsetX)px; border-color: black;">
<div>your content</div>
</div>
@code
private double startX, startY, offsetX, offsetY;
private void OnDragStart(DragEventArgs args)
startX = args.ClientX;
startY = args.ClientY;
private void OnDragEnd(DragEventArgs args)
offsetX += args.ClientX - startX;
offsetY += args.ClientY - startY;
【讨论】:
这不像你可以用 javascript 实现的平滑拖动。以上是关于在 Blazor 中实现可移动 <div>的主要内容,如果未能解决你的问题,请参考以下文章
如何在 RealmRecyclerViewAdapter 中实现可过滤