拖放填空答案

【问题标题】：Drag and drop fill in blanks拖放填空
【发布时间】：2020-08-30 17:46:25
【问题描述】：

这是我的拖放填空代码。但问题是，如果用户在他/她得到点之后在错误的位置插入了错误的单词，他/她想要将单词放在正确的位置。在这段代码中，那种类型的单词删除不起作用。

<!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>

【问题讨论】：

标签： javascript html drag-and-drop html5-draggable

【解决方案1】：

我在这里添加了一些更改以使其动态化，请注意我更改了 HTML 并添加了 CSS 我不会重复这些简单的事情，我将描述 javascript 更改：

以下将循环通过<i>标签并将remove事件附加到它：

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

remove 函数将使用cloneNode() 创建<i> parent 的新克隆，然后搜索<i> 标签并重新附加remove 事件，因为cloneNode() 方法不会克隆事件侦听器，然后创建一个新元素，它将作为 .draggable 的副本，我们替换了 suing drop 事件，然后将所有事件侦听器和属性附加到它（类、ondrag、ondrop ...等），这个新的 div 将放在后面到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);
}

这里要注意的一件事是，一旦您删除了放置的元素，它将以错误的顺序放置，我将把这个留给您修复；），这是我认为您想要的：

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>

【讨论】：

我的意思是，如果用户想在填空后删除单词。那怎么去掉呢？
你好@ROOT 这里 id="drag1" & id="drag2" 是必要的吗？
很高兴为您提供帮助，如果您觉得有帮助，请考虑accepting我的回答！
用户填空后如何提交数据？