Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dataTransfer.setData of drag&drop doesn't work in chrome?

<div id="asd" title="222">drag me</div>

<script>
var el = document.getElementById("asd");
el.draggable=true;
el.addEventListener("dragstart", function(ev){
    ev.stopPropagation();
    var dt = ev.dataTransfer;
    dt.effectAllowed = "copyMove";
        console.log(this.getAttribute("title") + " attr");
    dt.setData('Text', this.getAttribute("title"));
        console.log(dt.getData('Text') + " dt");
},false);
</script>

FIDDLE:

http://jsfiddle.net/vwjCa/

http://jsfiddle.net/vwjCa/2/ (custom type here instead of text)

in firefox prints:

222 attr
222 dt

in chrome prints:

222 attr
 dt

where is the problem here? thanks in advance

like image 654
skyline26 Avatar asked Aug 15 '12 17:08

skyline26


2 Answers

answering to myself:

apparently chrome allows to read dataTransfer's data only in the drop event

this is for security reason

for instance if I "drag over" a credit card number on a remote page, this one should not be able to read my data unless i have not "dropped"

firefox does the same, but allows to read getData() if "domain" of events is the same

like image 145
skyline26 Avatar answered Oct 12 '22 12:10

skyline26


There is a bug in chrome that allows you only to use certain mime-types. Try to change 'Text' in your code to 'text/plain', that should work in chrome.

like image 21
matthias.p Avatar answered Oct 12 '22 10:10

matthias.p