I have been working quite a lot recently on my latest project, ClickIt. ClickIt is a web development tool using the new HTML5 drag and drop standards. It has been working fine with all browsers until very recently I discovered it had an issue with both Mozilla Firefox and Microsoft Edge. I have in the past stated my dislike for Firefox after it made my life much harder in one of my courseworks last semester and now my anger continues.
Chrome, Safari and Opera cover a reasonably large base of users but for full compatibability, I'm going out of my way to try and fix an issue which I don't even know what it is. The original problem occured when I used the W3 standard for drag and drop and did this:
function DragBlock(ev, mode) { setData(ev, "mode", mode); setData(ev, "text", ev.target.innerText); setData(ev, "style", ev.target.getAttribute("class")); } function setData(ev, x, v){ ev.originalEvent.dataTransfer.setData(x, v); }
The problem however is that when I then try to retrieve this information, none of it exists. It does in Chrome and Safari, but not in Firefox or Edge. If I find a solution I will post it here.
ev.target.innerText function. This function is not supported in Edge or Firefox, but is in Chrome and Safari. So there you have it. My problem is fixed.setData function is actually not the name of the value but the type. For some reason, Chrome and Safari accept this as the name anyway and transform this to a map from the name to the value (or in this case x -> v). Instead of messing about with this, my solution, which is somewhat crude, is to use a global variable which in turn is a map from x -> v. Since I put these in functions, my functions were simply changed to modify this global variable upon request and retrieve information back from it. This solution is as I say crude since it relies on the fact there is only one object being transferred. I am most puzzled by the fact that the issue is totally different with Safari and Chrome and that they work this as if it were a map.