Jump to content

GeorgeB

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

GeorgeB's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. GeorgeB
    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>
  2. GeorgeB
    I'm checking against Safari for Windows version 5.1.7. George
  3. GeorgeB
    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
×
×
  • Create New...