HTML5 drag and drop will not

Question

Playing with drag and drop, and while I can seem to be draggable, I can’t fall.

Here is my playground: http://jsfiddle.net/KZ8RD/1/

Basically, the dragstart and dragend on the draggable node seem to work fine. But I still need to trigger any event on the target nodes.

 # Source handlers $('#source') .on('dragstart', (e) -> log '#source dragstart', this, e) .on('dragend', (e) -> log '#source dragend', this, e) # Target Handlers $('#cells td') .on('dragenter', (e) -> log 'target dragenter', this, e) .on('dragleave', (e) -> log 'target dragleave', this, e) .on('dragover', (e) -> log 'target dragover', this, e) .on('drop', (e) -> log 'target drop', this, e)​​​ 

So, what conditions must exist for the dragenter and drop target events to fire? I obviously miss some of them.

Answer 1

You have been bitten by one of the many quirks of the HTML5 drag and drop API: you need to attach some data to the drag event, otherwise it will be ignored by potential drop targets. The fix is ​​to add a line

 e.originalEvent.dataTransfer.setData 'text/html', 'foo' 

in the dragstart . (Note that e.dataTransfer will not work because the dataTransfer not been copied to e by jQuery, at least from 1.7.) The working fork of your playground: http://jsfiddle.net/AK2zJ/

Note that this will give you dragenter and dragover , but not drop ... as stated in the above article:

In order for the drop event to work completely, you need to cancel the default values ​​for both the dragover event and the dragenter.

You can do this in jQuery by returning false from each of these events. Here is an example with this modification that allows you to make the drop event: http://jsfiddle.net/YaEBj/

In addition to this uncertainty, it's worth mentioning that there are serious flaws in the HTML5 drag and drop API. Indeed, the only good reason to use it (and not something like jQuery UI) is if you want to enable drag and drop operations in multiple browser windows.