aroberge / reeborg

Enhanced Karel-the-robot clone
http://reeborg.ca/reeborg.html
Other
47 stars 36 forks source link

Drag and drop file opening functionality #455

Open schellenberg opened 4 years ago

schellenberg commented 4 years ago

Without any prompting/instruction from me, my students try to drag/drop previously saved files onto the Reeborg window in their browser, and are confused as to why it doesn't "just open it".

I did a quick proof-of-concept on this, by just editing the index.html file in my instance of Reeborg. You can see the process here: https://github.com/schellenberg/reeborg/commit/fdf184ac4079724c519047fd3a8457fc512dd762

Basically, I added a container div (which I called dropArea), then attached a drop handler to it, which executes when something is drag/dropped onto the window. The drop handler is essentially the same code that is executed when the keyboard shortcut (Cmd-O).

If I set the container div to position: absolute; top:0; left:0; right:0; bottom:0;, it catches everything that is dropped on the screen, but throws off the header menu bar and editor/world panels by a few pixels. Not sure how to fix that yet...

Anyway, implementing drag/drop functionality like this seems like it would be worth it. I'll do some more testing with my classes to make sure it mostly works before making it prettier.

aroberge commented 4 years ago

This would definitely be a nice addition.

On Fri, Sep 27, 2019 at 5:40 PM Dan Schellenberg notifications@github.com wrote:

Without any prompting/instruction from me, my students try to drag/drop previously saved files onto the Reeborg window in their browser, and are confused as to why it doesn't "just open it".

I did a quick proof-of-concept on this, by just editing the index.html file in my instance of Reeborg. You can see the process here: schellenberg@fdf184a https://github.com/schellenberg/reeborg/commit/fdf184ac4079724c519047fd3a8457fc512dd762

Basically, I added a container div (which I called dropArea), then attached a drop handler to it, which executes when something is drag/dropped onto the window. The drop handler is essentially the same code that is executed when the keyboard shortcut (Cmd-O).

If I set the container div to position: absolute; top:0; left:0; right:0; bottom:0;, it catches everything that is dropped on the screen, but throws off the header menu bar and editor/world panels by a few pixels. Not sure how to fix that yet...

Anyway, implementing drag/drop functionality like this seems like it would be worth it. I'll do some more testing with my classes to make sure it mostly works before making it prettier.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/aroberge/reeborg/issues/455?email_source=notifications&email_token=AAEZXQSY26T2TKWWKNFMFR3QLZVTXA5CNFSM4I3KVV3KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HOH5DKA, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEZXQSNAHWVKJ3SWOSTRZ3QLZVTXANCNFSM4I3KVV3A .