拖放测验原版 Javascript

Question

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

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

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

我想让问题的空白 div 只允许每个 div 放置一个元素。（我可以把它们堆叠起来）
掉线后我想检查当前问题div的答案是否正确。

我该怎么办？

P.S。我是 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 中，您只需要检查其中是否有任何 child 元素。如果是，请将 child 追加回 .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>

拖放测验原版 Javascript

Drag and Drop Quiz Vanilla Javascript

html

javascript

css

drag-and-drop