Doesn't work on mobile? OnItemDrop never triggers.

[ChristopherLodge]

Tried on latest Edge, Chrome and Firefox. Dragdrop version 2.4.0 in a Blazor server project (NET 6). I have also confirmed this issue in Chrome in 'emulation' mode.

I have a number of dropzone elements configured as the below

<Dropzone Id=PlayerID Class="PlayerInventory d-flex justify-center align-center flex-wrap" Items="GameObject.Players.Find(a => a.PlayerID == selectedPlayer.PlayerID).Bags.Find(a => a.IDNum == bag.IDNum).contents" TItem="Item" OnItemDrop="@((i) => MoveItem(i, bag.IDNum))"> <<ItemComp context="@context" player="@GameObject.Players.Find(a => a.PlayerID == selectedPlayer.PlayerID)"></ItemComp> </Dropzone> _Host.cshmtl has the following included: `

<script>
    // options are optional ;)
    MobileDragDrop.polyfill({
        // use this to make use of the scroll behaviour
       dragImageTranslateOverride: MobileDragDrop.scrollBehaviourDragImageTranslateOverride
    });
</script>`

When attempting to 'drag and drop' on the emulator window, I was about to discover an exception.

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at Function.from () at Object.createEventArgs (blazor.server.js:1:8200) at P.dispatchGlobalEventToAllElements (blazor.server.js:1:13902) at P.onGlobalEvent (blazor.server.js:1:13233) at w (drag-utils.ts:144:38) at t.Y (drag-operation-controller.ts:514:21) at drag-operation-controller.ts:240:18

The code works as expected with no exceptions in a standard desktop browser.

If you want any further traces/information please let me know

[medmor]

Hi If you are still interested, I found a temporary solution to this problem. I think that blazor.server.js expects two arrays in the dataTransfer object (files and items), and i dont know why? here is a snippet from the source code (you can find the code here https://github.com/dotnet/aspnetcore/blob/8a05a97cbe08ee72486713f999856662f96f115c/src/Components/Web.JS/src/Rendering/Events/EventTypes.ts)

function parseDragEvent(event: DragEvent): DragEventArgs {
  return {
    ...parseMouseEvent(event),
    dataTransfer: event.dataTransfer ? {
      dropEffect: event.dataTransfer.dropEffect,
      effectAllowed: event.dataTransfer.effectAllowed,
      files: Array.from(event.dataTransfer.files).map(f => f.name), //here is the source of this error
      items: Array.from(event.dataTransfer.items).map(i => ({ kind: i.kind, type: i.type })),  //here is the source of this error
      types: event.dataTransfer.types,
    } : null,
  };
}

So what I did, is to simply I added those arrays to dataTransfer object when the event is dispatched. I dont use mobile-drag-drop (the source code is very complicated for me) I use instead dragdroptouch (https://github.com/Bernardo-Castilho/dragdroptouch). Just copy the code of DragDropTouch.js, add a Githubissues.

Githubissues is a development platform for aggregating issues.