Question

我希望能够拖动红色正方形中的红色圆圈和蓝色正方形中的蓝色圆圈，并在放下后将其居中。如果颜色不匹配，则圆圈应返回到其原始位置。

我设法使圆圈拖放，但是我不能让它们都这样做。我是javaScript的新手，如何实现呢？

const dragger = document.getElementsByClassName("dragger")[1];

const holders = document.getElementsByClassName('holder');

for(const container of holders) {
    container.addEventListener("dragover", dragover)
    container.addEventListener("dragenter", dragenter)
    container.addEventListener("drop", drop)
}
  function dragover(e) {
    e.preventDefault()
  }
  function dragenter(e) {
    e.preventDefault()
  }
  function drop() {
    this.append(dragger)
  }

<body>
    <div class="container shadow p-3 mb-5 bg-white rounded">
        <p id="p1">There's only one rule: Match the Red Circle with the Red Square and the Blue Circle with the Blue Square<br>
        Oh....You might see a green square and a green circle if you are ColorBlind<br>
        Have a COLORFUL day xD</p>
        <center><p id="p2">Disclaimer: this page is <span style="color:red;">NOT RESPONSIVE</span></p></center>
        <div class="blueSquare holder" id="blueSquare"></div>
        <div class="blueCircle dragger" id="blueCircle" draggable="true"></div>
        <div class="redSquare holder" id="redSquare"></div>
        <div class="redCircle dragger" id="redCircle" draggable="true"></div>
    </div>
</body>

将圆圈拖放到相同颜色的正方形中并将其居中

0 个答案: