why is my .invisible class added to all elements - child, parent, etc-CodePudding

When I drag one card with the red border, I wanted to only show the dragged element. So, I added the .invisible class to the original element, but everything is invisible now. Why?

Full code here: https://codepen.io/asamad9134/pen/WNKLpZb

const cards = document.querySelector('.cards');

cards.addEventListener('dragstart', (event) => {
  const selectedCard = event.target;
  selectedCard.classList.add('invisible');
});


cards.addEventListener('dragend', (event) => {
  const selectedCard = event.target;
  selectedCard.classList.remove('invisible');
});

.cards {
  display: flex;
  width: 100vw;
  justify-content: space-around;
}

.card {
  font-family: Arabic;
  border-radius: 10%;
  ;
  font-size: 4em;
  text-align: center;
  width: 200px;
  height: 130px;
  background-color: white;
  border: 10px solid rgb(255, 85, 0);
}

.card:hover {
  cursor: grab;
  transform: scale(1.2);
  transition: 0.3s;
}

.empty-divs {
  display: flex;
  justify-content: space-around;
  width: 100vw;
}

.empty-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blank-card {
  width: 200px;
  height: 130px;
  background-color: #f4f4f4;
  border-radius: 10%;
  text-align: center;
  border: 10px solid grey;
}

.invisible {
  display: none;
}

<section >
  <p  id="أَرْنَب" draggable=true>أَرْنَب</p>
  <p  draggable=true>كِتَاب</p>
  <p  draggable=true>كُرَة</p>
</section>


<section >

  <div >
    <img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
    <p ></p>

  </div>

  <div >
    <img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
    <p ></p>
  </div>

  <div >
    <img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
    <p ></p>
  </div>

</section>

EDIT, I set the opacity: 0; instead but this has a strange lag affect.

CodePudding user response：

display: none; removes the tag and its effects for all intents and purposes, but the tag remains visible in the source code. Try using opacity: 0.4; so that it's visibility is changed and not completely removed from the structure. You could then set that opacity to 0 if you wanted it to be completely invisibile, but not be removed.

CodePudding user response：

Here's an approach to make it so that only the current element that is being dragged displays. Note that I also used visibility: hidden to hide the cards instead of opacity: 0.

// create a nodelist of all of the cards
const cards = document.querySelectorAll('.card');

// add a an event listener for each card in the nodelist
cards.forEach(card => {
  card.addEventListener('dragstart', (event) => { 
    const selectedCard = event.target;
    // create an array of the cards that are not selected so you can
    // "hide" only the not selected cards
    const notSelectedCards = Array.from(cards).filter(card => card !== selectedCard)
    selectedCard.classList.add('card-dragging');
    notSelectedCards.forEach(card => card.classList.add('invisible'));
    
    // remove the "invisible" class (and do whatever other
    // cleanup on dragend that you want)
    selectedCard.addEventListener('dragend', (event) => { 
      selectedCard.classList.remove('card-dragging');
      notSelectedCards.forEach(card => card.classList.remove('invisible'));
    }, { once: true});
  })
})

* {
  box-sizing: border-box;
}

.cards {
  display:flex;
  justify-content: space-around;
}

.card {
  font-family: Arabic;
  border-radius: 10%;
  font-size: 4em;
  text-align:center;
  width: 200px;
  height: 130px;
  background-color: white;  
  border: 10px solid rgb(255, 85, 0);
}

.card:hover{
  cursor: grab;
  transform: scale(1.2);
  transition: 0.3s;
}

.empty-divs{
  display: flex;
  justify-content: space-around;
}

.empty-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blank-card {
  width: 200px;
  height: 130px;
  background-color: #f4f4f4;
  border-radius: 10%;
  text-align:center;
  border: 10px solid grey;
}

.invisible {
  visibility: hidden;
}

.card-dragging {
  opacity: .2;
}

<section >
  <p  id="أَرْنَب" draggable=true>أَرْنَب</p>
  <p  draggable=true>كِتَاب</p>
  <p  draggable=true>كُرَة</p>
</section>


<section >

  <div >
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p ></p>

  </div>

  <div >
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p ></p>
  </div>

  <div >
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p ></p>
  </div>

</section>