Pesquisar na Comunidade
Mostrando resultados para as tags ''drop''.
Encontrado 1 registro
-
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>
-
- drag and drop
- drag
- (e mais 8 )