Condições com Drag And Drop

Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar? JS // Jogador 1

 const fillplace1 = document.querySelector('#fillplace1'). const fillplace2 = document.querySelector('#fillplace2'). const fillplace3 = document.querySelector('#fillplace3'). var fill. const empties = document.querySelectorAll('.empty'). fillplace1.addEventListener('dragstart', enterstart). fillplace2.addEventListener('dragstart', enterstart). fillplace3.addEventListener('dragstart', enterstart). for (const empty of empties) { empty.addEventListener('dragover', dragOver). empty.addEventListener('dragenter', dragEnter). empty.addEventListener('dragleave', dragLeave). empty.addEventListener('drop', dragDrop). } function enterstart(){ fill = this. } function dragOver(e) { e.preventDefault(). } function dragEnter(e) { e.preventDefault(). this.className += ' hovered'. } function dragLeave() { this.className = 'empty'. } function dragDrop(id) { this.className = 'empty'. this.append(fill). } **HTML** <link rel="stylesheet" href="../css/jogar.css" /> <div id="barraGeneral"> <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" /> </div> <div id="persona"> <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" /> </div> <button id="btpassar" onclick="cont(). ">Passar Rodada</button> <H1 id="campomana">1</H1> <!-- Mesa das cartas jogador 1--> <div class="empty" id="emptyplace1"> </div> <div class="empty" id="emptyplace2"> </div> <div class="empty" id="emptyplace3"> </div> <div class="empty" id="emptyplace4"> </div> <div class="empty" id="emptyplace5"> </div> <!-- Mão do jogador 1 --> <div class="emptyhand1"> <div class="fill" draggable="true" id="fillplace1"> <img src='../imagens/Sorteio/aa.png' draggable='true'> </div> </div> <div class="emptyhand2"> <div class="fill" draggable="true" id="fillplace2"> <img src='../imagens/Sorteio/aa2.png' draggable='true'> </div> </div> <div class="emptyhand3"> <div class="fill" draggable="true" id="fillplace3"> <img src='../imagens/Sorteio/aa2.png' draggable='true'> </div> </div>