2

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

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

4

1 回答 1

2

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

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

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

remove 函数将创建一个新的<i>parent 克隆 using cloneNode()，然后搜索<i>标签并重新附加 remove 事件，因为该cloneNode()方法不会克隆事件侦听器，然后创建一个新元素，它将是.draggable我们替换 suing的副本删除事件，然后将所有事件侦听器和属性附加到它（类，ondrag，ondrop ...等），这个新的div将被放回toolboxdiv。

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>

于 2020-05-14T09:38:47.563 回答