拖放测验 Vanilla Javascript

Question

我目前正在构建一个简单的拖放测验，但我只能使用 html css 和 vanilla javascript。 这个想法是有一个带有答案的 div 和一个带有问题的 div。在问题文本中有一些空白 div，您可以在其中放置可拖动的答案。

例如，您有“a,b,c”和“x,y,z”的答案，而问题是“字母表的前三个字母是：___”

我在两个主要方面需要帮助：

1. 我想让问题的空白 div 允许每个 div 只放置一个元素。 （我可以在自动柜员机上堆叠它们）
2. drop 后我想检查当前问题 div 中的答案是否正确。

我该怎么办？

附：我是 html/css/js 的新手，所以也许可以告诉我，如果没有外部库和 php 就无法实现这一点。

/* Events fired on the drag target */

document.addEventListener("dragstart", function(event) {
 // The dataTransfer.setData() method sets the data type and the value of the dragged data
  event.dataTransfer.setData("Text", event.target.id);
  
  // Output some text when starting to drag the p element
 document.getElementById("demo").innerHTML = "Started to drag the p element.";
  
  // Change the opacity of the draggable element
  event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
 document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});

/* Events fired on the drop target */

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
 event.target.style.border = "3px dotted red";
 }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
   Reset the color of the output text and DIV's border color
   Get the dragged data with the dataTransfer.getData() method
   The dragged data is the id of the dragged element ("drag1")
   Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
 event.preventDefault();
 if ( event.target.className == "droptarget" ) {
  document.getElementById("demo").style.color = "";
  event.target.style.border = "hidden";
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  }
});

.droptarget {
    display: inline-block;
    min-width: 50px;
    height: 25px;
    border: 1px solid #aaaaaa;
    color: #000;
    text-align: center;
}
.container {
    display: inline-block;
    padding: 15px;
    margin: 10px;
    background: #eee;
    border: 2px solid black;
    border-radius: 5px;
    box-sizing:border-box;
}
.dragtarget {
    background-color: red;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.domande {
    display: inline-block;
    padding: 15px;
    margin: 10px;
    background: #eee;
    border: 2px solid black;
    border-radius: 5px;
    box-sizing:border-box;
}

<p>Trascina la risposta nel quadrato giusto</p>

<div class="container">
    <p draggable="true" class="dragtarget" id="dragtarget">A,B,C</p>
    <p draggable="true" class="dragtarget" id="dragtarget">1,2,3</p>
</div>

<div class="domande">
    <h3>Prime tre lettere dell'alfabeto<div class="droptarget"></div></h3>
    <h3>Primi tre numeri<div class="droptarget"></div></h3>
</div>
<p id="demo"></p>

Answer 1

使用相同的id真的是bad，只能得到与getElementById的第一个元素相遇。相反，我将使用dragstart 捕获拖动的DOM，并稍后在drop 上使用它。在drop 中，您只需要检查其中是否有任何子元素。如果是，则将该子项附加回.container。

您没有提供有关如何检查的任何详细信息，因此很难提供帮助，我只能帮助您解决问题。

var dragP;
/* Events fired on the drag target */

document.addEventListener("dragstart", function (event) {
    // The dataTransfer.setData() method sets the data type and the value of the dragged data
    // event.dataTransfer.setData("Text", event.target.id);
    dragP = event.target;

    // Output some text when starting to drag the p element
    document.getElementById("demo").innerHTML = "Started to drag the p element.";

    // Change the opacity of the draggable element
    event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function (event) {
    document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function (event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
});

/* Events fired on the drop target */

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function (event) {
    if (event.target.className == "droptarget") {
        event.target.style.border = "3px dotted red";
    }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function (event) {
    event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function (event) {
    if (event.target.className == "droptarget") {
        event.target.style.border = "";
    }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
   Reset the color of the output text and DIV's border-color
   Get the dragged data with the dataTransfer.getData() method
   The dragged data is the id of the dragged element ("drag1")
   Append the dragged element into the drop element
*/
document.addEventListener("drop", function (event) {
    event.preventDefault();
    let targetDiv = event.target;
    if (targetDiv.className == "droptarget") {
        document.getElementById("demo").style.color = "";
        targetDiv.style.border = "hidden";
        if (targetDiv.childElementCount != 0){
            let childP = targetDiv.getElementsByTagName("p")[0];
            document.getElementById("answer").appendChild(childP);
        }
        targetDiv.appendChild(dragP);
        dragP = null;
    }
});

document.getElementById("checkAnswer").addEventListener("click", function () {
    let questions = document.getElementsByClassName("question");
    let resultP = document.getElementById("result");
    resultP.innerHTML = "";
    for (let index = 0; index < questions.length; index++) {
        const element = questions[index];
        let childP = element.getElementsByTagName("p")[0];
        let question = element.childNodes[0].textContent;
        let answer = childP != undefined ? childP.innerText : "no answer";
        resultP.append(`${question} : ${answer} ; `);
    }
})

.droptarget {
    display: inline-block;
    min-width: 50px;
    height: 25px;
    border: 1px solid #aaaaaa;
    color: #000;
    text-align: center;
}

.container {
    display: inline-block;
    padding: 15px;
    margin: 10px;
    background: #eee;
    border: 2px solid black;
    border-radius: 5px;
    box-sizing: border-box;
}

.dragtarget {
    background-color: red;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.domande {
    display: inline-block;
    padding: 15px;
    margin: 10px;
    background: #eee;
    border: 2px solid black;
    border-radius: 5px;
    box-sizing: border-box;
}

<p>Trascina la risposta nel quadrato giusto</p>

<div class="container" id="answer">
    <p draggable="true" class="dragtarget" id="dragtarget">A,B,C</p>
    <p draggable="true" class="dragtarget" id="dragtarget">1,2,3</p>
</div>

<div class="domande">
    <h3 class="question">Prime tre lettere dell'alfabeto<div class="droptarget"></div>
    </h3>
    <h3 class="question">Primi tre numeri<div class="droptarget"></div>
    </h3>
</div>
<p id="demo"></p>
<button id="checkAnswer">Check</button>
<p id="result"></p>