Question

I tried to work with html5 drag&drop api, and it works very well on my chrome 20.0.1132 on windows machine, but most fun – that the same version of chrome on mac os lion is not working. I mean dragstart is working, but drop event, dragleave, dragover is not fired.
Here is html:

<form id="fake_form" action="#" >
            <div id="canvas_wrapper" style="overflow: hidden;width: 600px; position: relative;border: 1px solid black; margin-left: 30px;">
                <canvas width="600" height="300" >
                </canvas>
            </div>
 </form>

Here is javascript:

    var canvas = $('canvas')[0];
    canvas.addEventListener('dragenter', function(e){
        console.log('dragenter');
    }, false);
    canvas.addEventListener('dragleave', function(){
        console.log('dragleave');
    }, false)
    canvas.addEventListener('dragover', function(e){
        console.log('dragover');
        if(e.preventDefault){
            e.preventDefault();
        }
        return false;
    }, false);
    canvas.ondrop = function(e){
        console.log('ondrop');
    /** OTHER CODE **/

If it helps: on safari on the same mac – it works, I`m dragging image tags some of them have draggable attribute, some of them – not. Just checked – on canary mac version 22 it works.

UPDATE: I figured out that there is some magic with dragstart event, if I delete line
with this e.dataTransfer.setData('src', src_var) everythings become working

Answer 1

Solution for this problem – when you use e.dataTransfer.setData the first argument should be the right mime type, i changed it to text/plain and everything is become working