Jump to content
GeorgeB

Browser Detection for HTML5 Drag and Drop

Recommended Posts

Hi I have created a simple HTML5 drag and drop game. However, I am having a nightmare trying to get all current browsers to display the message "THIS BROWSER SUPPORTS / DOES NOT SUPPORT DRAG AND DROP." The message displays correctly in I.E.9, Chrome, Firefox and Opera. But Safari for Windows displays 'This Browser SUPPORTS Drag and Drop', even though it doesn't. I've changed the JS from if(Modernizr.draganddrop) to if(window.FileReader && Modernizr.draganddrop). It works, but then I.E.9 displays 'This Browser DOES NOT Support Drag and Drop' even though it does. I'm using Modernizr and I suspect that I need to edit this - but I just don't know how to do that. This is the section of code I'm referring to: if(Modernizr.draganddrop){ document.write("This browser supports Drag and Drop");}else{ document.write("This browser does not support HTML5 Drag and Drop ");} In the <head> there is: <script src="../scripts/modernizr.js"></script> I've spent days on this but got nowwhere. Any help and advice would be much appreciated. Thanks George

Share this post


Link to post
Share on other sites
The message displays correctly in I.E.9, Chrome, Firefox and Opera. But Safari for Windows displays 'This Browser SUPPORTS Drag and Drop', even though it doesn't.
what version of Safari though? Modernizr supports Safari 2+.http://modernizr.com/docs/
We support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, we support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile and whilst we’re still doing more testing we believe we support Blackberry 6+.

Share this post


Link to post
Share on other sites

Using my Windows7 VM with the same version of Safari, I get the expected results. I wouldn't use document.write, it is not a best practice. See this jsbin examplehttp://jsbin.com/evosed/3/edit

 <!DOCTYPE html><html><head><meta charset=utf-8 /><title>Modernizr Example</title><style>span{  display: inline-block;  width: 200px;} .yes{  background-color: green;} .no{  background-color: red;}</style><script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script><script>window.onload = function(){  var supportsDragAndDrop = Modernizr.draganddrop ? 'yes' : 'no';  var resultTextEle = document.getElementById('result');   resultTextEle.innerHTML = supportsDragAndDrop.toUpperCase();  resultTextEle.className = supportsDragAndDrop;};</script> </head><body>  <h1>Does this browser support H5 Drag And Drop?  <span id='result'></span></h1></body></html>

Edited by thescientist

Share this post


Link to post
Share on other sites

I've reproduced the coding exactly as above but I still get Does this browser support H5 Drag And Drop? YES even though the dnd doesn't work. I've included the entire dnd coding for the game: <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script><script>function drag(tgt, e){ e.dataTransfer.setData("Text", tgt.id);}function over(e){ var iddraggable = e.dataTransfer.getData("Text"); var elemId = e.target.getAttribute('id'); if( (elemId == 'target1') && iddraggable == 'zeus') e.preventDefault(); if( (elemId == 'target2') && iddraggable == 'aphrodite') e.preventDefault(); if( (elemId == 'target3') && iddraggable == 'apollo') e.preventDefault();}function drop(tgt, e){ var elemId = e.dataTransfer.getData("Text"); tgt.appendChild(document.getElementById(elemId)); e.preventDefault();}</script><script>window.onload = function(){ var supportsDragAndDrop = Modernizr.draganddrop ? 'yes' : 'no'; var resultTextEle = document.getElementById('result'); resultTextEle.innerHTML = supportsDragAndDrop.toUpperCase(); resultTextEle.className = supportsDragAndDrop;};</script> </head> <body><h1>Does this browser support H5 Drag And Drop? <span id='result'></span></h1> <div id="dragNames"> <div id="drag1"><img id="poseidon" draggable="true" src="../images/poseidon_text.jpg" ondragstart="drag(this, event)"></div> <div id="drag2" ><img id="hermes" draggable="true" src="../images/hermes_text.jpg" ondragstart="drag(this, event)"></div> <div id="drag3" ><img id="zeus" draggable="true" src="../images/zeus_text.jpg" ondragstart="drag(this, event)"></div> <div id="drag4" ><img id="apollo" draggable="true" src="../images/apollo_text.jpg" ondragstart="drag(this, event)"></div> <div id="drag5" ><img id="artemis" draggable="true" src="../images/artemis_text.jpg" ondragstart="drag(this, event)"></div> <div id="drag6" ><img id="aphrodite" draggable="true" src="../images/aphrodite_text.jpg" ondragstart="drag(this, event)"></div> </div> <!--IMAGE TARGETS--> <div id="targetImages"> <div id="target1" ondrop="drop(this, event)" ondragover="over(event)"></div> <div id="target2" ondrop="drop(this, event)" ondragover="over(event)"></div> <div id="target3" ondrop="drop(this, event)" ondragover="over(event)"></div> <h1>Identify the Ancient Greek God or Goddess by dragging <br> his or her name over their image</h1> </div>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...