display: none;会删除标记及其效果，但标记在源代码中仍然可见。请尝试使用opacity: 0.4;，以便更改标记的可见性，而不是将其从结构中完全删除。如果希望标记完全不可见，但不删除，则可以将不透明度设置为0。

这里有一种方法可以使它只显示当前被拖动的元素。注意，我还使用了visibility: hidden来隐藏卡片，而不是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 class="cards">
  <p class="card card-idle" id="أَرْنَب" draggable=true>أَرْنَب</p>
  <p class="card card-idle" draggable=true>كِتَاب</p>
  <p class="card card-idle" draggable=true>كُرَة</p>
</section>

<section class="empty-divs">

  <div class="empty-div">
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p class="blank-card"></p>

  </div>

  <div class="empty-div">
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p class="blank-card"></p>
  </div>

  <div class="empty-div">
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p class="blank-card"></p>
  </div>

</section>