html5 drag and drop drag anything opacity

Question

I am using html5 drag and drop to drag and drop div elements. On the dragstart event I set the the opacity of the div element to 0.4 which reduces makes the div element lighter but it is not transparent ie. when I drag the div element over other div elements I can't see the elements in the background.

var cols = document.querySelectorAll('.draggablediv');
[].forEach.call(cols, function(col) {  
col.addEventListener('dragstart', function (e) {this.style.opacity =
'0.4'; return true;}, false); });

I am using chrome 17.0.963.56.

Edit Note: This does not happen in firefox

Any ideas?

Thanks

tamarintech tamarintech · Accepted Answer · 2012-03-06T21:37:09

There is a tutorial that features the same code you are using at: http://www.html5rocks.com/en/tutorials/dnd/basics/

If you load the link above in Firefox, you'll notice the examples do not work. The tutorial features a specific mention of Firefox and why the examples don't work - you'll need to "wire up" the dataTransfer object.

html5 drag and drop drag anything opacity

1 Answers