动态创建的图标存在但不可见

发布于 2025-01-10 16:48:27 字数 4235 浏览 0 评论 0原文

我以这样的方式编写代码：当用户将可拖动元素放入有效的放置目标时，代码会使用 font Awesome 动态创建图标元素。但是，相关图标不可见。不知道如何解决这个问题。尝试使用诸如“display: block”、“displayvisible”之类的 CSS 规则并没有帮助。我需要一些指导

const imageContainer = document.querySelectorAll(".imgContainer");
const droppables = document.querySelectorAll(".drop");
const container2 = document.querySelector(".container2");
console.log(container2)


let currentDrag = null;

imageContainer.forEach(function(el) {
  el.addEventListener("dragstart", dragStart);
  el.addEventListener("dragend", dragEnd);
});

function dragStart(e) {
  currentDrag = e.target;
  console.log("start");
}

function dragEnd() {
  console.log("end");

  currentDrag = null;
}

droppables.forEach(function(droppable) {
  droppable.addEventListener("dragenter", dragEnter);
  droppable.addEventListener("dragover", dragOver);
  droppable.addEventListener("dragleave", dragLeave);
  droppable.addEventListener("drop", drop);
});

function dragEnter(e) {
  e.preventDefault();
}
function dragOver(e) {
  e.preventDefault();
}
function dragLeave() {
  console.log("has left");
}
function drop(e) {
  let imgSrc = currentDrag.src;
  let x = this.id;
  let newRegex = new RegExp(x, "g");
  let searchResult = newRegex.test(imgSrc)
  if(!searchResult) return
    e.preventDefault();
    currentDrag.parentElement.style.display = "none";
    // setTimeout(() => currentDrag.parentNode.style.display = "none", 2000);
    this.append(currentDrag);
    setTimeout(() => this.style.display = "none", 2000);
    container2.innerHTML = "<i class=fa-solid fa-circle-check icon></i>"
}

.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.imgContainer {
  width: 300px;
  height: 300px;

}

.drop {
  border-radius: 10px;
  width: 300px;
  height: 300px;
  border: solid black 1px;
}


img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container2 {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.fa-solid {
  width: 30px;
  height: 30px;
  display: visible;
  color: grey;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>DragAndDrop3.0</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous">
  </head>
  <body>
    <div class="parent">
      <div class="container1">
        <div class="imgContainer bolt"  draggable="true">
          <img src="imgs/bolt.jpeg"  alt="">
        </div>
        <div class="imgContainer jordan"  draggable="true">
          <img src="imgs/jordan.jpeg"  alt="">
        </div>
        <div class="imgContainer senna"  draggable="true">
          <img src="imgs/senna.jpeg" alt="">
        </div>
        <div class="imgContainer ronaldo"  draggable="true">
          <img src="imgs/ronaldo.jpeg"  alt="">
        </div>
        <div class="imgContainer tyson"  draggable="true">>
          <img src="imgs/tyson.jpeg" alt="">
        </div>
      </div>

      <div class="container2">
        <p class="rightAnswer"></p>
        <div class="athelteInfo"></div>
      </div>

      <div class="container3">
        <div class="drop runner bolt" id="bolt">runner</div>
        <div class="drop basketball jordan" id="jordan">basketball</div>
        <div class="drop soccer ronaldo" id="ronaldo">soccer</div>
        <div class="drop F1 senna"  id="senna">formula 1</div>
        <div class="drop box tyson" id="tyson">box</div>
      </div>
    </div>

    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

原文

I've written my code in such a way that when the user drops a draggable element into a valid drop target the code dynamically creates an icon element using font awesome. However, the icon in question isn't visible. Don't know how to go about solving this issue. Attempts at using CSS rules such as "display: block", "display visible" didn't help. I need some guidance please

const imageContainer = document.querySelectorAll(".imgContainer");
const droppables = document.querySelectorAll(".drop");
const container2 = document.querySelector(".container2");
console.log(container2)


let currentDrag = null;

imageContainer.forEach(function(el) {
  el.addEventListener("dragstart", dragStart);
  el.addEventListener("dragend", dragEnd);
});

function dragStart(e) {
  currentDrag = e.target;
  console.log("start");
}

function dragEnd() {
  console.log("end");

  currentDrag = null;
}

droppables.forEach(function(droppable) {
  droppable.addEventListener("dragenter", dragEnter);
  droppable.addEventListener("dragover", dragOver);
  droppable.addEventListener("dragleave", dragLeave);
  droppable.addEventListener("drop", drop);
});

function dragEnter(e) {
  e.preventDefault();
}
function dragOver(e) {
  e.preventDefault();
}
function dragLeave() {
  console.log("has left");
}
function drop(e) {
  let imgSrc = currentDrag.src;
  let x = this.id;
  let newRegex = new RegExp(x, "g");
  let searchResult = newRegex.test(imgSrc)
  if(!searchResult) return
    e.preventDefault();
    currentDrag.parentElement.style.display = "none";
    // setTimeout(() => currentDrag.parentNode.style.display = "none", 2000);
    this.append(currentDrag);
    setTimeout(() => this.style.display = "none", 2000);
    container2.innerHTML = "<i class=fa-solid fa-circle-check icon></i>"
}

.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.imgContainer {
  width: 300px;
  height: 300px;

}

.drop {
  border-radius: 10px;
  width: 300px;
  height: 300px;
  border: solid black 1px;
}


img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container2 {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.fa-solid {
  width: 30px;
  height: 30px;
  display: visible;
  color: grey;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>DragAndDrop3.0</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous">
  </head>
  <body>
    <div class="parent">
      <div class="container1">
        <div class="imgContainer bolt"  draggable="true">
          <img src="imgs/bolt.jpeg"  alt="">
        </div>
        <div class="imgContainer jordan"  draggable="true">
          <img src="imgs/jordan.jpeg"  alt="">
        </div>
        <div class="imgContainer senna"  draggable="true">
          <img src="imgs/senna.jpeg" alt="">
        </div>
        <div class="imgContainer ronaldo"  draggable="true">
          <img src="imgs/ronaldo.jpeg"  alt="">
        </div>
        <div class="imgContainer tyson"  draggable="true">>
          <img src="imgs/tyson.jpeg" alt="">
        </div>
      </div>

      <div class="container2">
        <p class="rightAnswer"></p>
        <div class="athelteInfo"></div>
      </div>

      <div class="container3">
        <div class="drop runner bolt" id="bolt">runner</div>
        <div class="drop basketball jordan" id="jordan">basketball</div>
        <div class="drop soccer ronaldo" id="ronaldo">soccer</div>
        <div class="drop F1 senna"  id="senna">formula 1</div>
        <div class="drop box tyson" id="tyson">box</div>
      </div>
    </div>

    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

分享到QQ

分享到微博