Drag and drop fill in blanks

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/61793172/drag-and-drop-fill-in-blanks

标签

javascript

html

drag-and-drop

html5-draggable