GeorgeB Posted April 20, 2013 Share Posted April 20, 2013 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 Link to comment Share on other sites More sharing options...
thescientist Posted April 20, 2013 Share Posted April 20, 2013 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+. Link to comment Share on other sites More sharing options...
GeorgeB Posted April 20, 2013 Author Share Posted April 20, 2013 I'm checking against Safari for Windows version 5.1.7. George Link to comment Share on other sites More sharing options...
thescientist Posted April 20, 2013 Share Posted April 20, 2013 (edited) 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 April 20, 2013 by thescientist Link to comment Share on other sites More sharing options...
GeorgeB Posted April 20, 2013 Author Share Posted April 20, 2013 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now