Drag and drop fill in blanks

Question

Drag and drop fill in blanks

1.3k Views Asked by Roy Smith At 14 May 2020 at 08:53

This is my drag and drop throw fill in blanks code. But the thing is I also want if the user has inserted the wrong word at the wrong place after he/she getting point he/she wants to put a word in the right place. in this code in that type of word removing is not working.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .draggable {background-color:#00ff00;margin:5px;padding:3px;}
      #div1,#div2 {display:inline-block;min-width:25px;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)">drag</span>
    <span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">drop</span>
    <br />
    This is a sample 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> and <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> sentence.
  </body>
</html>

Original Q&A

There are 1 best solutions below

**ROOT** · Answer 1 · 2020-05-14T09:38:47.563000

I added few changes here to make it dynamic, please note that I change the HTML and add CSS I will not go over these simple things, I will describe the javascript changes:

The following will loop through <i> tag and attache remove event to it:

document.querySelectorAll('i.cancel').forEach(function(el) {
  el.addEventListener('click', remove);
});

The remove function, will create a new clone of <i> parent using cloneNode(), then search for <i> tag and re-attach remove event to it since the cloneNode() method doesn't clone event listeners, then create a new element that will be our duplicate for .draggable that we replaced suing drop event, then attach all event listeners and attributes to it (class, ondrag, ondrop ... etc), this new div will be placed in back to the toolbox div.

function remove() {
  parentElement = this.parentElement.cloneNode(true);
  parentElement.querySelector("i.cancel").addEventListener("click", remove);
  parentElement.classList.add("draggable");
  document.querySelector(".toolbox").appendChild(parentElement);
  var div = document.createElement("div");
  div.classList.add("droppable");
  div.ondragover = allowDrop;
  div.ondrop = drop;
  div.ondragover = allowDrop;

  this.parentElement.replaceWith(div);
}

One thing to notice here is that once you remove the dropped element it will be place in the wrong order, I will leave this to you fix ;) , Here is what I think you want:

i.cancel {
  display: none;
  color: #FFF;
}

.drop-area:hover i {
  display: inline-block;
  background-color: red;
  margin-left: 5px;
}

.draggable {background-color:#00ff00;margin:5px;padding:3px;}
.droppable {display:inline-block;min-width:25px;min-height:10px;border-style:solid;border-width:0px;border-bottom-width:2px;}

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      
    </style>
    
  </head>
  <body>
    <div class="toolbox">
    <span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">drag<i class="cancel">x</i></span>
    <span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">drop <i class="cancel">x</i></span>
    </div>
    <br />
    <div class="drop-area">
      This is a sample 
      <div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)"></div> and <div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)"></div> sentence.
    </div>
    <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 = "";
      }
      
      document.querySelectorAll('i.cancel').forEach(function(el) {
        el.addEventListener('click', remove);
      });
      
      function remove() {
        parentElement = this.parentElement.cloneNode(true);  parentElement.querySelector('i.cancel').addEventListener('click',remove)
        parentElement.classList.add('draggable');  document.querySelector('.toolbox').appendChild(parentElement);
        var div = document.createElement("div");
        div.classList.add("droppable");
        div.ondragover = allowDrop;
        div.ondrop = drop;
        div.ondragover = allowDrop;

        this.parentElement.replaceWith(div);   
      }
    </script>
  </body>
</html>

Drag and drop fill in blanks

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DRAG-AND-DROP

Related Questions in HTML5-DRAGGABLE

Trending Questions

Popular # Hahtags

Popular Questions