Condições com Drag And Drop

[iagomonteiro 0]

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>