iagomonteiro

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>

Estou precisando de ajuda, as imagens são adicionadas na pagina, e quero que ao clicar nela busque o nome no banco de acordo com a imagem clicada e apareça na div montar. <?php include "../banco/connect.php"; include "../geral/aba.php"; $tipo = $_GET['t']; $sql = "SELECT * from produto where tipo = '$tipo'"; $consulta = "SELECT * from produto"; if(isset($_GET['c'])) { $categoria = $_GET['c']; $sql = $sql."and categoria = '$categoria'"; } $sql = $sql."order by id_produto"; $query = mysqli_query($link, $sql); $con = mysqli_query($link, $consulta); while($line = mysqli_fetch_array($query)){ $img = "prod".$line['id_produto']."/imagem1.png"; ?> <div class="produto2" > <img id="demo" src="../banco/produtos/<?php echo $img; ?>" class="imagem_produto"> </div> <?php } ?> <div class="montar" id="deck"> <?php while($dado = mysqli_fetch_array($con)){ ?> <script> document.getElementById("demo").onclick = function() {myFunction()}; function myFunction() { document.getElementById("deck").innerHTML = "Nome:<?php echo $dado["nome"]; ?>"; } </script> <?php } ?> </div>