Question

这是我的拖放式填空代码。但是问题是，如果用户在获得提示后在错误的位置插入了错误的单词，我也想要他/她想在正确的位置放置单词。在此代码中，这种类型的单词删除功能无效。

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

Answer 1

我在此处添加了一些更改使其具有动态性，请注意，我更改了HTML并添加了CSS，我将不介绍这些简单的内容，我将描述javascript的更改：

以下内容将遍历<i>标记并将remove事件附加到该标记：

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

remove函数将使用cloneNode()创建<i>父级的新克隆，然后搜索<i>标记，并将自cloneNode()起的remove事件重新附加到该克隆。方法不会克隆事件侦听器，然后创建一个新元素，该元素将是我们与.draggable相同的元素，我们将其替换为su 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>

拖放填充空格

1 个答案: