如何在Blazor中的拖放过程中防止移动设备中的scoll

Question

我正在尝试在Blazor中实现div的拖放。我似乎可以在桌面设备上使用它，但当从移动设备访问同一页面时，拖放不仅会移动div(有时(，还会滚动页面(不进行拖放时应该如此(。我尝试将这些添加到dragMeContainer定义中，但没有成功：

@ontouchmove:preventDefault="true"
@ontouchcancel:preventDefault="true"
@ontouchcancel:stopPropagation="true"
@ontouchmove:stopPropagation="true"

有人知道如何在移动设备上拖放时停止滚动吗？

Blazor中剃刀页面的示例代码：

@page "/"
<style>
.postItIcon {
color: gold;
font-size: x-large;
}
.dragMeContainer {
width: 150px;
padding-right: 5px;
padding-left: 5px;
min-height: 50px;
background-color: gold;
position: absolute;
float: left;
border: 1px solid lightgray;
color: black !important;
}
.dragMeToolbar {
font-weight: bold;
padding-right: 0px;
color: gray !important;
}
</style>
<div ondragover="event.preventDefault();" ondragstart="event.dataTransfer.setData('', event.target.id);"
@ondrop="@(async (DragEventArgs args) => {await HandleDrop(args);})"
style="height: 1200px; width:1200px;">
<h1>Drag n drop</h1>
</div>
@if (_postIts != null)
{
foreach (PostItModel note in _postIts)
{
<div class="dragMeContainer" style="top: @(note.Y)px; left: @(note.X)px;" draggable="true"
ondragover="event.preventDefault();"
@ondragstart="@((DragEventArgs args) => HandleDragStart(note, args))"
@ondrop="@(async (DragEventArgs args) => {await HandleDrop(args);})"
@ontouchstart="@((TouchEventArgs args) => HandleDragStart(note, args))"
@ontouchmove="@((TouchEventArgs args) => HandleTouchMove(note, args))"
@ontouchend="@(async (TouchEventArgs args) => {await HandleDrop(args);})">
<div class="dragMeToolbar">
<b>Drag me</b>
</div>
<div id="PostIt@(note.Id)">@note.Description</div>
</div>
}
}
@code {
public List<PostItModel> _postIts { get; set; }
public PostItModel _postItPayload { get; set; }
double _mouseRelativeToDraggedElementX = 0;
double _mouseRelativeToDraggedElementY = 0;
double _newPositionX = 0;
double _newPositionY = 0;
public class PostItModel
{
public int Id { get; set; }
public string Description { get; set; }
public int X { get; set; }
public int Y { get; set; }
}
protected override async Task OnInitializedAsync()
{
_postIts = new List<PostItModel>();
_postIts.Add(new PostItModel { Id = 1, Description="Drag me around", X=10, Y=100 });
_postIts.Add(new PostItModel { Id = 2, Description="Drag me up using mobile", X=100, Y=200 });
}
private void HandleDragStart(PostItModel selectedPostIt, dynamic args)
{
_postItPayload = selectedPostIt;
if (args.GetType() == typeof(DragEventArgs))
{
_mouseRelativeToDraggedElementX = args.ClientX;
_mouseRelativeToDraggedElementY = args.ClientY;
}
else if (args.GetType() == typeof(TouchEventArgs))
{
_mouseRelativeToDraggedElementX = args.TargetTouches[0].PageX - selectedPostIt.X;
_mouseRelativeToDraggedElementY = args.TargetTouches[0].PageY - selectedPostIt.Y;
}
}
private void HandleTouchMove(PostItModel selectedPostIt, TouchEventArgs args)
{
_newPositionX = args.TargetTouches[0].PageX;
_newPositionY = args.TargetTouches[0].PageY;
selectedPostIt.X = Convert.ToInt32((_newPositionX - _mouseRelativeToDraggedElementX));
selectedPostIt.Y = Convert.ToInt32((_newPositionY - _mouseRelativeToDraggedElementY));
}
private async Task HandleDrop(dynamic args)
{
int X = 0;
int Y = 0;
if (args.GetType() == typeof(DragEventArgs))
{
X = _postItPayload.X + Convert.ToInt32(args.ClientX - _mouseRelativeToDraggedElementX);
Y = _postItPayload.Y + Convert.ToInt32(args.ClientY - _mouseRelativeToDraggedElementY);
}
else if (args.GetType() == typeof(TouchEventArgs))
{
X = Convert.ToInt32((_newPositionX - _mouseRelativeToDraggedElementX));
Y = Convert.ToInt32((_newPositionY - _mouseRelativeToDraggedElementY));
}
var postIt = _postIts.SingleOrDefault(x => x.Id == _postItPayload.Id);
if (postIt != null)
{
postIt.X = X;
postIt.Y = Y;
}
}
}

Answer 1

最好的选择是使用无值的触摸动作CSS属性。在使用之前，请确保与您的目标浏览器兼容。

.dragMeContainer {
**touch-action: none;**
width: 150px;
padding-right: 5px;
padding-left: 5px;
min-height: 50px;
background-color: gold;
position: absolute;
float: left;
border: 1px solid lightgray;
color: black !important;
}

Answer 2

从触摸抑制器中删除="true"对我很有效。因此：

<ul @ontouchmove:preventDefault
@ontouchcancel:preventDefault
@ontouchcancel:stopPropagation
@ontouchmove:stopPropagation>