如何修复拖放测验？

Question

我需要有关适合我的拖放测验的帮助。

我有两个错误。第一个是拖到框中的文本不会为我保留在那里，第二个错误是当我将它移动到它应该属于的正确框时它没有倒计时我的分数，所以没有任何反应。

不知道什么是团队，需要咨询团队。我很抱歉回想起来它是捷克语而不是英语，但我不想再重写了。

感谢您的帮助。

var score = 0;
var doprava = ['Doprava'];
var zdravotnictvi = ['Zdravotnictví'];
var autprumysl = ['Automobilový průmysl'];
var finance = ['Finance']
var scoreElement = document.querySelector(".score");

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");
  if (ev.target.doprava == 'textBox3' && doprava.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.zdravotnictvi == 'textBox2' && zdravotnictvi.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.finance == 'textBox4' && finance.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.autprumysl == 'textBox1' && autprumysl.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
}

<div id="module">
  <br>
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Automobil.Prumysl.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Zdravotnictvi.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Doprava.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Finance.png') }}" width="320" height="200" />
  <br>
  <br>
  <div id="textBox1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <br>
  <br>
  <div id="drag">
    <span class="span" id="doprava" draggable="true" ondragover="drag(event)">Doprava</span>
    <span class="span" id="zdravotnictvi" draggable="true" ondragover="drag(event)">Zdravotnictví</span>
    <span class="span" id="autprumysl" draggable="true" ondragover="drag(event)">Automobilový průmysl</span>
    <span class="span" id="finance" draggable="true" ondragover="drag(event)">Finance</span>
  </div>
  <br>
  <p style="font-size:20px; text-align: center;" class="score">0/0</p>
</div>

Answer 1

代码中有一些错误：

要拖动的项目上的事件应该是 ondragstart(ev) 以便您可以捕获项目开始拖动时要执行的操作。
您正在将被拖动的项目的 ID 与项目被拖动到的容器的 ID 进行匹配，因此它们从未进入 if 条件。
现在，如果您想使用 indexOf 来检查元素是否是使用其 ID 的数组的一部分，则被拖动的项目（在本例中为 span）的 ID 必须完全相同作为数组中的值之一（也是案例）。

这是一个工作代码（还添加了基本 css，以便文本框实际可见）：

var score = 0;
var doprava = ['Doprava'];
var zdravotnictvi = ['Zdravotnictví'];
var autprumysl = ['Automobilový průmysl'];
var finance = ['Finance']
var scoreElement = document.querySelector(".score");

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");
  if (ev.target.id == 'textBox3' && doprava.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.id == 'textBox2' && zdravotnictvi.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.id == 'textBox4' && finance.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.id == 'textBox1' && autprumysl.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
}

#textBox1, #textBox2, #textBox3, #textBox4 {
  border: 1px solid black;
  height: 20px;
}

<div id="module">
  <br>
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Automobil.Prumysl.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Zdravotnictvi.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Doprava.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Finance.png') }}" width="320" height="200" />
  <br>
  <br>
  <div id="textBox1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <br>
  <br>
  <div id="drag">
    <span class="span" id="Doprava" draggable="true" ondragstart="drag(event)">Doprava</span>
    <span class="span" id="Zdravotnictví" draggable="true" ondragstart="drag(event)">Zdravotnictví</span>
    <span class="span" id="Automobilový průmysl" draggable="true" ondragstart="drag(event)">Automobilový průmysl</span>
    <span class="span" id="Finance" draggable="true" ondragstart="drag(event)">Finance</span>
  </div>
  <br>
  <p style="font-size:20px; text-align: center;" class="score">0/0</p>
</div>

Answer 2

请参阅下面更新的代码段：

var score = 0;
var scoreElement = document.querySelector(".score");

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");
  if (data == ev.target.getAttribute("data-id")) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
}

#textBox1, #textBox2, #textBox3, #textBox4 {
  border: 1px solid black;
  height: 20px;
}

<div id="module">
  <br>
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Automobil.Prumysl.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Zdravotnictvi.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Doprava.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Finance.png') }}" width="320" height="200" />
  <br>
  <br>
  <div id="textBox1" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="autprumysl"></div>
  <div id="textBox2" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="zdravotnictvi"></div>
  <div id="textBox3" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="doprava"></div>
  <div id="textBox4" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="finance"></div>
  <br>
  <br>
  <div id="drag">
    <span class="span" id="doprava" draggable="true" ondragstart="drag(event)">Doprava</span>
    <span class="span" id="zdravotnictvi" draggable="true" ondragstart="drag(event)">Zdravotnictví</span>
    <span class="span" id="autprumysl" draggable="true" ondragstart="drag(event)">Automobilový průmysl</span>
    <span class="span" id="finance" draggable="true" ondragstart="drag(event)">Finance</span>
  </div>
  <br>
  <p style="font-size:20px; text-align: center;" class="score">0/0</p>
</div>

如何修复拖放测验？

How to fix drag and drop quiz?

html

javascript

drag-and-drop