Blazor拖拽实现能否同时支持鼠标与触摸？现有代码问题排查

你的实现存在核心问题导致触摸屏无法工作，以下是具体问题和可行的修正方案：

问题点 #

1. 原生HTML5拖拽API不支持触摸事件
   draggable="true"、ondragstart、ondrop这些是鼠标拖拽专属的事件体系，触摸设备不会触发这类事件。你只给可拖拽元素加了@ontouchstart，但没有处理触摸移动、触摸结束的完整流程，也没有和放置区域的触摸事件联动，自然无法完成触摸拖拽。

2. 放置区域未适配触摸操作
   放置区域仅监听了ondrop（鼠标拖拽结束事件），触摸设备上不会触发这个事件，必须添加触摸结束事件的处理逻辑，才能识别触摸下的放置动作。

3. 拖拽对象跨组件传递存在隐患
   你用实例字段_draggableItem存储拖拽对象，触摸操作下可能因为组件实例的隔离性，导致放置组件无法正确获取到这个对象，建议改用静态字段或共享服务来传递。

修正后的实现代码 #

可拖拽元素组件 #

<div class="draggable-area" 
     draggable="true"
     @ref="_draggableElement"
     @ondragstart="HandleDragStart"
     @ontouchstart="HandleTouchStart"
     @ontouchmove="HandleTouchMove"
     @ontouchend="HandleTouchEnd"
     style="position: relative; @_touchPositionStyle">
    <!-- 拖拽内容 -->
</div>

@code {
    private ElementReference _draggableElement;
    private string _touchPositionStyle = string.Empty;
    private double _initialTouchX, _initialTouchY;
    private double _elementOffsetX, _elementOffsetY;
    // 用静态字段跨组件传递拖拽对象，也可以用注入的共享服务替代
    public static object? CurrentDraggedItem { get; private set; }

    protected Task HandleDragStart()
    {
        CurrentDraggedItem = this;
        return Task.CompletedTask;
    }

    protected void HandleTouchStart(TouchEventArgs e)
    {
        CurrentDraggedItem = this;
        var touch = e.Touches[0];
        // 记录触摸点相对于元素的初始位置
        _initialTouchX = touch.ClientX;
        _initialTouchY = touch.ClientY;
        // 获取元素当前的偏移量
        var rect = _draggableElement.GetBoundingClientRectAsync().Result;
        _elementOffsetX = rect.Left;
        _elementOffsetY = rect.Top;
        // 设置元素为绝对定位，支持自由移动
        _draggableElement.Style.Position = "absolute";
    }

    protected void HandleTouchMove(TouchEventArgs e)
    {
        var touch = e.Touches[0];
        // 计算元素的新位置
        var newX = _elementOffsetX + (touch.ClientX - _initialTouchX);
        var newY = _elementOffsetY + (touch.ClientY - _initialTouchY);
        _touchPositionStyle = $"left: {newX}px; top: {newY}px;";
        StateHasChanged();
    }

    protected void HandleTouchEnd(TouchEventArgs e)
    {
        var touch = e.ChangedTouches[0];
        // 获取触摸结束位置的目标元素
        var target = document.elementFromPoint(touch.ClientX, touch.ClientY);
        // 判断是否落在放置区域内
        if (target?.classList.contains("droppable-area") == true)
        {
            // 触发放置逻辑
            TriggerTouchDrop();
        }
        // 重置元素定位样式
        _touchPositionStyle = string.Empty;
        _draggableElement.Style.Position = "relative";
        StateHasChanged();
    }

    private void TriggerTouchDrop()
    {
        Console.WriteLine($"触摸拖拽完成：{CurrentDraggedItem}");
        // 这里可以复用鼠标拖拽的放置逻辑
    }
}

放置区域组件 #

<div class="droppable-area"
     @ondrop="HandleDrop"
     @ondrop:stopPropagation="true"
     @ondragover="HandleDragOver"
     @ontouchend="HandleTouchEndOnDropArea">
    <!-- 放置区域内容 -->
</div>

@code {
    protected void HandleDragOver(DragEventArgs e)
    {
        e.PreventDefault(); // 必须阻止默认行为，才能触发后续的ondrop事件
    }

    protected Task HandleDrop()
    {
        Console.WriteLine($"鼠标拖拽完成：{DraggableComponent.CurrentDraggedItem}");
        // 处理放置逻辑
        return Task.CompletedTask;
    }

    protected void HandleTouchEndOnDropArea(TouchEventArgs e)
    {
        if (DraggableComponent.CurrentDraggedItem != null)
        {
            Console.WriteLine($"触摸拖拽完成（放置区域触发）：{DraggableComponent.CurrentDraggedItem}");
            HandleDrop().Wait();
        }
    }
}

额外注意事项 #

• 如果你的项目需要兼容更多触摸场景（比如多点触摸、拖拽时的视觉反馈），可以给可拖拽元素添加CSS样式touch-action: none，阻止浏览器默认的触摸行为（比如滚动）。
• 跨组件传递拖拽对象时，用注入的共享服务比静态字段更符合Blazor的组件设计原则，能避免静态字段可能带来的内存泄漏问题。

内容的提问来源于stack exchange，提问作者James Harcourt