Can Blazor drag drop work with mouse and touch with this implementation

Question

My drag drop code is working fine with mouse, but not on a touch screen. Should the below work or is there a mistake here?

The draggable item:

<div class="draggable-area" draggable="true" 
   @ondragstart="@(() => HandleDragStart())"
   @ontouchstart="@(() => HandleDragStart())">

protected async virtual Task HandleDragStart()
{
    // set the draggable object
    _draggableItem = this;
}

The droppable area (in a different component):

<div class="droppable-area"
     @ondrop="HandleDrop" 
     @ondrop:stopPropagation="true"
     ondragover="event.preventDefault();">

protected async override Task HandleDrop()
{
    // handle the drop
    Console.WriteLine($"Dropped item: {_draggableItem}");
}

Did you try with the right events? https://stackoverflow.com/a/3603510/842935 — dani herrera, May 09 '23 at 11:58
in terms of starting the drag, I thought I was using the right event @daniherrera ... ? — James Harcourt, May 09 '23 at 12:34
Mobiles don't use drag, they use various touch events. I think if you want both, you'll have to implement both. — Bennyboy1973, May 09 '23 at 12:51

score 1 · Accepted Answer · answered May 09 '23 at 13:03

1

The solution I used in one of my projects is to implement drag and drop only for mouse using the HTML Drag and Drop API and then use dragdroptouch polyfill to add support for touch screens. The library needs a simple modification in order to work with Blazor as discussed here.

answered May 09 '23 at 13:03

Dimitris Maragkos

8,932
2
8
26

Thanks -= this was exactly what was required. I'm amazed the HTML drag drop API doesn't already cover this! – James Harcourt May 09 '23 at 15:09

Can Blazor drag drop work with mouse and touch with this implementation

1 Answers1