Add Drag & Drop example to demo #600

New Issue

claunia · 2026-01-29T16:43:48Z

claunia commented

2026-01-29 16:43:48 +00:00

Originally created by @hexdump2002 on GitHub (Nov 22, 2020).

Originally assigned to: @GregorBiswanger on GitHub.

Hi,

I am a new Electron.NET user and need drag & drop in my app (from external to my app). After reading all the documentation and browsing the demo project I have not seen any trace of drag and drop feature but it seems electron supports it. Does Electron.NET has support for it?

If Electron.NET has support for drag & drop would be nice to have a simple example for newcomers.

Originally created by @hexdump2002 on GitHub (Nov 22, 2020). Originally assigned to: @GregorBiswanger on GitHub. Hi, I am a new Electron.NET user and need drag & drop in my app (from external to my app). After reading all the documentation and browsing the demo project I have not seen any trace of drag and drop feature but it seems electron supports it. Does Electron.NET has support for it? If Electron.NET has support for drag & drop would be nice to have a simple example for newcomers.

claunia added the Feature label 2026-01-29 16:43:48 +00:00

claunia closed this issue

2026-01-29 16:43:48 +00:00

claunia commented

2026-01-29 16:43:49 +00:00

@hexdump2002 commented on GitHub (Nov 22, 2020):

Well, it seems I was a bit confused between javascript and c# :). This is a regular browser drag & drop. If anybody needs it here is the code I used for testing in index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<style>
    #drag-file {
        background-color: blue;
        color:white;
        text-align: center;
        width:300px;
        height:300px;
    }
</style>

<div id="drag-file">
    <p>Drag your files here</p>
</div>

<SurveyPrompt Title="How is Blazor working for you?"/>

<script suppress-error="BL9992">
    (function () {
        var holder = document.getElementById('drag-file');

        holder.ondragover = () => {
            return false;
        };

        holder.ondragleave = () => {
            return false;
        };

        holder.ondragend = () => {
            return false;
        };

        holder.ondrop = (e) => {
            e.preventDefault();
            var files = e.target.files || (e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files);
            console.log(files);
            
            for (let f of e.dataTransfer.files) {
                console.log('File(s) you dragged here: ', f.path)
            }
            
            return false;
        };
    })();
</script>

Cheers!

@hexdump2002 commented on GitHub (Nov 22, 2020): Well, it seems I was a bit confused between javascript and c# :). This is a regular browser drag & drop. If anybody needs it here is the code I used for testing in index.razor: ``` @page "/" <h1>Hello, world!</h1> Welcome to your new app. <style> #drag-file { background-color: blue; color:white; text-align: center; width:300px; height:300px; } </style> <div id="drag-file"> <p>Drag your files here</p> </div> <SurveyPrompt Title="How is Blazor working for you?"/> <script suppress-error="BL9992"> (function () { var holder = document.getElementById('drag-file'); holder.ondragover = () => { return false; }; holder.ondragleave = () => { return false; }; holder.ondragend = () => { return false; }; holder.ondrop = (e) => { e.preventDefault(); var files = e.target.files || (e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files); console.log(files); for (let f of e.dataTransfer.files) { console.log('File(s) you dragged here: ', f.path) } return false; }; })(); </script> ``` Cheers!

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/Electron.NET#600