Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 drop event doesn't work unless dragover is handled

I am listening to the drop event and doing e.preventDefault() But its trying to open the dropped file. It was working fine till yesterday. But just today It broke for some unknown reason. I made a JsFiddle#bwquR/10 to reflect the Same.

Edit:

It looks like if you don't take the dragover event drop cannot be handled. even in the the fiddle If you comment the dragover It will not work.
In the actual work I missed the spelling of dragover But its still a question drop will not work without dragover

The fiddle was actually working but s the body was so small (only text DROP there). It was taking drop event only on that small area where DROP text lies not on the entire body. So I thought It was not working. Sorry for the confusion.

like image 511
Neel Basu Avatar asked Dec 07 '11 10:12

Neel Basu


People also ask

Why is drop event not firing?

In order to have the drop event occur on a div element, you must cancel the ondragenter and ondragover events. Using jquery and your code provided... Show activity on this post.

What is dragover event?

The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). The event is fired on the drop target(s).

What is a drop event?

The drop event is fired when an element or text selection is dropped on a valid drop target.

What is drag over?

1 to pull or be pulled with force, esp. along the ground or other surface. 2 tr; often foll by: away or from to persuade to come away (from something attractive or interesting)


Video Answer


1 Answers

I guess it is because that without dragOver event handler, default event handler of dragOver event is used, thus, no drop event is triggered after that. There is a need with e.preventDefault for dragOver event before drop event.

like image 144
zuo Avatar answered Sep 21 '22 19:09

zuo