I have a problem. I have a div component where I'll drag multiple images. This part is working perfectly. But I am not able to read the order of these images played in the component. What happens, I can play any position in the image of the div component, however, like to read in order as they are, from left to right.
I believe it is possible, but the solution must be complicated. Some of his friends could help me in the routine javascript to read this? Or know any technique that can help me.
Thanks
The Page Code: (all code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.draggable {
width: 90px;
height: 80px;
padding: 5px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
.ui-widget-header-modified p {
color:#99CC99;
}
#snaptarget {
height: 300px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
var Cont = 0;
addComponent = function(strImg){
if ($.trim(strImg) != '')
{
Cont = Cont + 1;
$('#imgPrompt img').remove();
$('#imgPrompt').prepend('<img id="' + strImg + '_Img' + Cont + '" src="' + strImg + '.gif" />');
$('#' + strImg + '_Img' + Cont).draggable({ snap: true });
}
}
</script>
</head>
<body>
<div class="demo">
<div id="snaptarget" class="ui-widget-header">
<p>Estrutura do Caminhão:</p>
</div>
<div id="snaptarget" style="border:dotted;border-color:#000000;height:310px">
<div style="float:left;width:15%">
<center>
<input type="button" style="width:200px" value="Eixo Livre Roda Simples" onclick="addComponent('eixolivre_rodasimples');"/><br />
<input type="button" style="width:200px" value="Eixo Livre Roda Única" onclick="addComponent('eixolivre_rodaunica');"/><br />
<input type="button" style="width:200px" value="Eixo Simples Roda Dupla" onclick="addComponent('eixosimples_rodadupla');"/><br />
<input type="button" style="width:200px" value="Eixo Tracionado Rodado Duplo" onclick="addComponent('eixotracionado_rodadoduplo');"/><br />
<input type="button" style="width:200px" value="Eixo Tracionado Rodado Simples" onclick="addComponent('eixotracionado_rodadosimples');"/><br />
<input type="button" style="width:200px" value="Eixo Trator Roda Dupla" onclick="addComponent('eixotrator_rodadupla');"/><br />
<input type="button" style="width:200px" value="Eixo Trator Roda Simples" onclick="addComponent('eixotrator_rodasimples');"/><br />
<input type="button" style="width:200px" value="Eixo Trator Roda Única" onclick="addComponent('eixotrator_rodaunica');"/><br />
<input type="button" style="width:200px" value="Estepe Duplo" onclick="addComponent('estepe_duplo');"/><br />
<input type="button" style="width:200px" value="Estepe Simples" onclick="addComponent('estepe_simples');"/><br />
<input type="button" style="width:200px" value="Estepe Triplo" onclick="addComponent('estepe_triplo');"/><br />
<input type="button" style="width:200px" value="Alongamento Eixo" onclick="addComponent('estruturaeixo_livre');"/><br />
</center>
</div>
<div id="imgPrompt" style="float:right;width:85%;height:310px;text-align:center">
<!-- Adicionar as Imagens -->
</div>
</div>
</div>
</body>
</html>