Bom dia, Estou tentando fazer uma pagina html para meu usuario testar um problema de combinação simples. Já tenho em meu codigo funcionando o drag and drop e consegui montar uma
Meu problema é que não consigo fazer com que a coluna de custos da minha tabela aumente conforme vou distribuindo minhas imagens na outra tabela. Pois precisaria que quando eu arrastasse a figura 1 pra alguma linha, no custo aparecesse R$ 0,90 e assim sucessivamente quando eu colocasse mais imagens.
<!DOCTYPE HTML>
<html>
<head>
<style>
.div1 {
position: relative;
overflow: hidden;
width: 10px;
height: 10px;
padding: 15px;
}
.div1 img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 0px;
text-align: center;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//clona
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
/*não clona
function drop2(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
} */
</script>
</head>
<body>
<h2>Arraste os blocos para as celulas</h2>
<table style="width:25%">
<tr>
<th>Ordens de venda:</th>
<th>Produto A</th>
<th>Produto B</th>
<th>Produto C</th>
<th>Data de Entrega</th>
<th>Preço</th>
<th>Desconto</th>
<th>Custo</th>
<th>Status</th>
</tr>
<tr>
<td><div id="azul"><img id="drag1" src="quadradoazul.jpg" draggable="true" ondragstart="drag(event)" width= "50" height="50"></div></td>
<td>2</td>
<td>3</td>
<td>0</td>
<td>Dia 5</td>
<td>R$35,00</td>
<td> </td>
<td><script>
//Preciso que esta celula entenda quando a imagem azul é arrastada para alguma outra celula de outra linha porém como faço meu "if" abaixo funcionar ?
if("#azul" in "#a1"){
alert("Deu Certo!!");
}
</script>
</td>
<th></th>
</tr>
<tr>
<td><img id="drag2" src="quadradovermelho.jpg" draggable="true" ondragstart="drag(event)" width="50" height="50"></td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>Dia 4</td>
<td>R$45,00</td>
<td> </td>
<td>$$$$$$</td>
<td> </td>
</tr>
<tr>
<td><img id="drag3" src="quadradoverde.jpg" draggable="true" ondragstart="drag(event)" width="50" height="50"></td>
<td>2</td>
<td>3</td>
<td>0</td>
<td>Dia 5</td>
<td>R$55,00</td>
<td> </td>
<td>$$$$$$</td>
<td> </td>
</tr>
</table>
<br><br>
<table id="segundaTabela" style="width:25%">
<tr>
<th>Maquina</th>
<th>Custo/Dia</th>
<th>Dia 1</th>
<th>Dia 2</th>
<th>Dia 3</th>
<th>Dia 4</th>
<th>Dia 5</th>
<th>Dia 6</th>
<th>Dia 7</th>
<th>Dia 8</th>
<th>Dia 9</th>
</tr>
<tr class="linha1">
<td>Maquina 1</td>
<td>R$ 0,90</td>
<td><div id="a1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a2" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a3" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a4" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a5" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a6" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a7" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a8" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="a9" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
</table>
</body>
</html>
