Drag & Drop help needed

Question

I would like some help to improve the following. How can I get a an incorrect dropped answer to be shown in red or green if it is correct. This is gap filling Drag & Drop exercise for my language students.

Below is the simple code I am using:

<!DOCTYPE HTML>

<html>
  <head>
    <style>
      .draggable {
    width: 120px;
    padding: 1px;
    border: 1px solid gray;
    margin: 0px;
    text-align:center;
}

  #div1,#div2 
   {display:inline-block;min-width:150px;min-height:10px;
   border-style:solid;border-width:0px;border-bottom-width:2px;}
  </style>
  <script>
  function allowDrop(ev){
    ev.preventDefault();
  }
  function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
  }
  function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.parentNode.replaceChild(document.getElementById(data), ev.target);
    document.getElementById(data).className = "";
  }
</script>
</head>
<body>
<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">
HEART TO HEART</span>
<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">
EYE TO EYE</span>
<br />

<ol>
<li>Our relationship was going badly wrong, but after we sat down and had a 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> talk we
decided to try again. We're a lot happier now.
</l7>

<li>I wish my wife and my sister could agree about some things. The problem is that
 they just can't see <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div> and argue about everything.
</li>
</ol>
</body>
</html>

You said you *would like some help to improve the following* but what specifically are you asking? If you're asking to have a function made for you, unfortunately that is not what Stackoverflow is for. You can try to write this function yourself, and if you encounter a question or problem that has not already been answered here before, then you can absolutely post here to ask about it. Check out the help center [on-topic](http://stackoverflow.com/help/on-topic) guide for more details. If I've misunderstood, I apologize; it might then be helpful to reword the post to be more specific. — Paul Richter, Jun 18 '14 at 18:30
You forgot the essential JSFiddle: http://jsfiddle.net/5L3Gf/ What is with the line-breaks? Can you not just use a margin around the question divs? `
` exists for a reason... — Mr. Polywhirl, Jun 18 '14 at 18:33

score 0 · Answer 1 · answered Jun 18 '14 at 18:54

0

If you set the loading option in JSFiddle to "No wrap - in <head>" then the drag and drop will work. Please use the console to diagnose your issues and include any errors in your post.

It appears that you were following this tutorial on http://www.w3schools.com/html/html5_draganddrop.asp which is not the place to be learning web development as they are not endorsed/affiliated by W3.

The following DEMO should function properly. I tested this out on Chrome.

I made a simple change to the drag() function:

function drag(ev) {
    ev.target.innerHTML += ' '; // Add space so that there is no keming...
    ev.dataTransfer.setData("Text", ev.target.id);
}

answered Jun 18 '14 at 18:54

Mr. Polywhirl

42,981
12
84
132

Hi Mr Polywhirl. Done what you suggested but still don't get it to work. Copied and pasted from DEMO and ammended drag() function as advised. – user2423131 Jun 18 '14 at 21:11
Your problem is that you are trying to manipulate the DOM when the script loads. Wait for the document to load. See this question: [What is the non-jQuery equivalent of '$(document).ready()'?](http://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready). – Mr. Polywhirl Jun 18 '14 at 22:56
Drag and drop works fine. Problem is drop accepts any drag, which shouldn't. Should only accept the correct option. – user2423131 Jun 19 '14 at 08:17
DONE. Thanks to Mr Polywhirl plus a little addition from http://codepen.10/anon/pen/wgCkB by Ivan Hanák. – user2423131 Jun 19 '14 at 08:34

Drag & Drop help needed

1 Answers1