如何在 Blazor 中拖放期间防止移动设备中的滚动

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

从触摸抑制器中删除 ="true" 对我有用。 所以：

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