Arquivado
Este tópico foi arquivado e está fechado para novas respostas.
Uso da ferramenta drag and drop com imagens em página em branco do tum
Recommended Posts
-
Conteúdo Similar
-
Por 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>
-
Por Omar~
Opa beleza pessoal? É o seguinte criei uma aplicação javascript aqui, para upload de arquivos(imagens) que mostra uma previa da mesma antes de salvar.
Fiz o testes em alguns navegadores e em 3 não funcionou como esperado.
IE e Edge como era de se esperar por serem péssimos navegadores a coisa não funcionou.
Porém meu descontamento foi com o mozilla firefox (atualizado) cujo o monitoramento do progresso não funciona corretamente.
Assim sendo a medida que o navegador vai lendo o arquivo enviado ele alterar a largura em porcentagem de um elemento html que é a barra de progresso exibindo assim o status do envio. E ai que entra o problema, pois ás vezes no "mozilla" a barra fica entre 1 e 12% independente do tamanho de bits da imagem como se o monitoramento não chegasse ao final, já no chrome, opera e safari o monitoramento se completa.
Se quiserem dar uma olhada e testar para confirmar que é realmente um bug de um navegador específico ficaria grato. Ou mesmo se saber o que está causando essa anomalia.
Obs.: O intuito disso é que depois de criada e prévia vou fazer uma função para cortar e redimensionar o tamanho, pós então criar a função que irá enviar a imagem para o servidor ou mesmo salvar-la como base64 para gravar em banco de dados (ainda não decidir o que realmente vou fazer).
O javascript está bem genérico e simples pois ainda é um embrião do realmente vai ser.
Nota: Fiz o teste no mozilla enviando arquivos "que não são imagem com a função liberada para esses tipos de arquivos sem usar previa" o monitoramento funcionou corretamente como estimado, tipos de arquivo TXT, DOCX, videos, BIN, EXE etc... o problema só são imagens mesmo.
HTML + CSS
Javascript
-
Por eliasedamasceno
Por exemplo, se o post conter a tag #1, fica na 1ª coluna, se tiver a tag #2, fica na 2ª coluna
Desde já agradeço
-
Por ewertonmartiny
Olá!
Estou com o seguinte problema:
Estou editando um item que o tamanho precisa ser definido pela parte do <body>, só que a largura da div só é alterada pelo <style>.
Se eu coloco <div class="xx" style="width=100px">, a div não é configurada dessa forma.
Tem algum meio que eu possa colocar no <style> para que ela seja alterada no <body>?
-
Por Giuseppe-BS
Olá, bom dia
Estou com um problema, eu sou estudante de Design Gráfico e estou criando um site, porém como eu entendo muito pouco de HTML e CSS, o negócio anda meio lento.
Por isso, decidi criar um provisório no tumblr, configurei o domínio e tal e fui ajeitando o HTML para ficar ao meu grado, porém, os textos e as imagens do site ficam borradas, meio desfocadas, tentei pesquisar muito sobre esse problema, mas não encontrei nada relacionado, por isso estou recorrendo ao fórum.
Link para o site: http://www.giuseppesartor.com.br
Eu não faço a menor ideia de onde possa estar o possível erro, pois realmente ainda não cheguei ao nível de entender todo o código HTML e CSS de um site, mas segue ele completo abaixo, caso ajude.
Obrigado desde já.
-