How to prevent scoll in mobile devices during drag and drop in Blazor

Question

I am trying to implement drag and drop of divs in Blazor. I seem to get it to work on desktop devices, but when accessing the same page from a mobile device the drag and drop not only move the divs (sometimes), it also scrolls the page (as it should when not doing drag and drop). I have tried adding these to the dragMeContainer definition, but no success there:

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

Anyone have an idea how to stop the scrolling during drag and drop on mobile devices?

Example code for razor page in 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

The best option is to use touch-action CSS property with none value. Please ensure the compatibility with your target browser before use.

.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

Removing ="true" from the touch suppressors worked for me. So:

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