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
