Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35618 > unrolled thread

drag and drop preventDefault

Back to article view | Back to comp.lang.javascript

Contents

  drag and drop preventDefault Andrew Poulos <ap_prog@hotmail.com> - 2018-09-21 15:48 +1000
    Re: drag and drop preventDefault Andrew Poulos <ap_prog@hotmail.com> - 2018-09-21 18:45 +1000
      Re: drag and drop preventDefault Julio Di Egidio <julio@diegidio.name> - 2018-09-21 03:48 -0700
        Re: drag and drop preventDefault Andrew Poulos <ap_prog@hotmail.com> - 2018-09-24 13:18 +1000
          Re: drag and drop preventDefault Julio Di Egidio <julio@diegidio.name> - 2018-09-24 04:40 -0700

#35618 — drag and drop preventDefault

I've started experimenting with the drag and drop API and I've got a 
problem I need help with.

I create a drop target

var drg = document.querySelector("blah");

and then assign a handler

drg.addEventListener("drop", dropHandler);

If I drop an image file onto the target I can process it and it all 
works as expected. If I drop the image onto the browser window the 
browser navigates to the image. I need only the target to process the 
file and the rest of the window to ignore it.

I've tried creating another listener for the page and setting the 
handler to preventDefault but it makes no difference.

Andrew Poulos

[toc] | [next] | [standalone]

#35620

On 21/09/2018 3:48 PM, Andrew Poulos wrote:
> I've started experimenting with the drag and drop API and I've got a 
> problem I need help with.
> 
> I create a drop target
> 
> var drg = document.querySelector("blah");
> 
> and then assign a handler
> 
> drg.addEventListener("drop", dropHandler);
> 
> If I drop an image file onto the target I can process it and it all 
> works as expected. If I drop the image onto the browser window the 
> browser navigates to the image. I need only the target to process the 
> file and the rest of the window to ignore it.
> 
> I've tried creating another listener for the page and setting the 
> handler to preventDefault but it makes no difference.

I don't know if this is the "right" way but I got it doing what I want with

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
   document.body.addEventListener(eventName, function(ev) {
     ev.preventDefault();
   }, false);
});

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35621

On Friday, 21 September 2018 10:45:13 UTC+2, Andrew Poulos  wrote:

> I don't know if this is the "right" way

Looks fine to me code-wise.  That said, the general web authoring guideline is
interfere with the browser's default behaviour the least possible: still, you
decide what the least possible is, re your actual requirements and constraints...

Julio

[toc] | [prev] | [next] | [standalone]

#35667

On 21/09/2018 8:48 PM, Julio Di Egidio wrote:
> On Friday, 21 September 2018 10:45:13 UTC+2, Andrew Poulos  wrote:
> 
>> I don't know if this is the "right" way
> 
> Looks fine to me code-wise.  That said, the general web authoring guideline is
> interfere with the browser's default behaviour the least possible: still, you
> decide what the least possible is, re your actual requirements and constraints...

Thanks.

Is there a "normal" way to handle when a web page allows files to be 
drag and dropped onto it without inadvertently navigating to the dropped 
file?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35669

On Monday, 24 September 2018 05:21:57 UTC+2, Andrew Poulos  wrote:
> On 21/09/2018 8:48 PM, Julio Di Egidio wrote:
> > On Friday, 21 September 2018 10:45:13 UTC+2, Andrew Poulos  wrote:
> > 
> >> I don't know if this is the "right" way
> > 
> > Looks fine to me code-wise.  That said, the general web authoring guideline is
> > interfere with the browser's default behaviour the least possible: still, you
> > decide what the least possible is, re your actual requirements and constraints...
> 
> Thanks.
> 
> Is there a "normal" way to handle when a web page allows files to be 
> drag and dropped onto it without inadvertently navigating to the dropped 
> file?

If by "normal" you mean where do people usually draw that line, I see "drop
areas" usually...  But that's an investigation you can do yourself, look at
sites that you like and that are doing the thing you need to do: what do
they do?  (It's an instance of looking at other programmers' solutions: it
doesn't replace but it certainly complements the study of principles and best
practices.)  Also look at the WCAG: I don't know, but there might be relevant
guidelines there, too.

But the emphasis on requirements remains *crucial*: for example, if your site
is targeted at programmers, you are wasting your and their time and patience;
OTOH, if it's targeted at people who can barely point and click, you might want
to make things extra-easy for them even at the cost of a loss in otherwise
general functionality...  IOW, there is no "normal" really: no one size fits
all.

HTH,

Julio

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web