Blazor Server .NET 6 Drag n Drop mobile devices

[Falco94]

Since .NET 6 the drag n drop behaviour using a polyfill library for mobile devices seems to be broken on Blazor Server.

I do not know, if this is a blazor.server.js issue or a problem with the polyfill library.

Start dragging an element on a mobile device gives these errors.

I added a sample project from https://github.com/Postlagerkarte/blazor-dragdrop to reproduce this.
blazor-dragdrop-master.zip

Downgrading this project to .NET 5 restores functionality.

[javiercn]

@Falco94 thanks for contacting us.

Based on the call stack, I believe this likely comes from the third-party drag-n-drop library which we don't have any control of. I would check with the library authors for suggestions first.

[Falco94]

Addition:

The issue comes with the commit 6969db9 inside blazor.server.js where function "u" was changed to function "h"

function h(e, t) {
        e.forEach((e => s.set(e, t)))
    }

function u(e) {
    const t = [];
    for (let n = 0; n < e.length; n++) {
        const r = e[n];
        t.push({
            identifier: r.identifier,
            clientX: r.clientX,
            clientY: r.clientY,
            screenX: r.screenX,
            screenY: r.screenY,
            pageX: r.pageX,
            pageY: r.pageY
        })
    }
    return t
}

blazor.server.js old, working:

, u(["drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop"], {
        createEventArgs: e => {
            return {
                ...p(t = e),
                dataTransfer: t.dataTransfer ? {
                    dropEffect: t.dataTransfer.dropEffect,
                    effectAllowed: t.dataTransfer.effectAllowed,
                    files: Array.from(t.dataTransfer.files).map((e => e.name)),
                    items: Array.from(t.dataTransfer.items).map((e => ({
                        kind: e.kind,
                        type: e.type
                    }))),
                    types: t.dataTransfer.types
                } : null
            };
            var t
        }

blazor.server.js new, not working:

, h(["drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop"], {
        createEventArgs: e => {
            return {
                ...d(t = e),
                dataTransfer: t.dataTransfer ? {
                    dropEffect: t.dataTransfer.dropEffect,
                    effectAllowed: t.dataTransfer.effectAllowed,
                    files: Array.from(t.dataTransfer.files).map((e => e.name)),
                    items: Array.from(t.dataTransfer.items).map((e => ({
                        kind: e.kind,
                        type: e.type
                    }))),
                    types: t.dataTransfer.types
                } : null
            };
            var t
        }

Is there maybe any quick workaround to solve this issue? (Except using a local edited version of blazor.server.js)
Any JavaScript experts here? I'm definitely not even an js amateur.
DragDropTouch.zip

For this specific mobile drag and drop implementation the error is

Is there any other way to implement drag and drop for mobile devices in blazor server? Am I doing a extraordinary way implementing it or why noone else has this issue :D

If its still the wrong place to report this issue, just close it please.

Thank you in advance!

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.

[tomes92]

Same issue, but did not have a proper way to debug this. Based on your call stack, I added the following lines in DragDropTouch.js:

In var DataTransfer = (function () {...

       Object.defineProperty(DataTransfer.prototype, "files", {
            /**
             * Added as fix for .NET6 Blazor Server
             */
            get: function () {
                return {};
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(DataTransfer.prototype, "items", {
            /**
             * Added as fix for .NET6 Blazor Server
             */
            get: function () {
                return {};
            },
            enumerable: true,
            configurable: true
        });

This fixed the issue.

[Falco94]

Same issue, but did not have a proper way to debug this. Based on your call stack, I added the following lines in DragDropTouch.js:

In var DataTransfer = (function () {...

       Object.defineProperty(DataTransfer.prototype, "files", {
            /**
             * Added as fix for .NET6 Blazor Server
             */
            get: function () {
                return {};
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(DataTransfer.prototype, "items", {
            /**
             * Added as fix for .NET6 Blazor Server
             */
            get: function () {
                return {};
            },
            enumerable: true,
            configurable: true
        });

This fixed the issue.

Working for me. Great job @tomes92 !