Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Após estudar e pesquisar bastante consegui montar um javascript drag and drop que capturasse as posições top e left da imagem e assim o PHP atualizava estas no SQL. Assim o PHP leria novamente as posições e exibiria estas nas posições antes escolhidas. Tudo vai bem, a pos é capturada, gravada na tabela porém o HTMl parece estar com problema, já verifiquei todo o PHP e o JS, tá tudo certo.
As informações no código-fonte estão todas certas porém estão exibindo as divs totalmente fora do que o margin e o left mandam, pelo que sei podia ser algo com display mas tentei e nada.
Relembrando, o código-fonte está todo certo o problema é que as divs não esão fazendo o que o HTML manda.
/applications/core/interface/imageproxy/imageproxy.php?img=http://img840.imageshack.us/img840/8571/70639209.png&key=0e3ec8c78a0578e19c43a66e8c0cc5ccba43190edeecda1cf2b418360ddad83e" alt="70639209.png" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img716.imageshack.us/img716/6696/44844730.png&key=a9104a9f11241b6f1a2b8f0fed9c5878b361f2bbdc0839bd2193cad23ecfc5c0" alt="44844730.png" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img818.imageshack.us/img818/5331/76559377.png&key=afe84a7fbbbe833ca653100342098191c0e53be09e74e31bf243da6edc5b1c54" alt="76559377.png" />
>
Posta o código completo da página. Só pelo input não dá pra saber. Tu tem que trabalhar bem no seu CSS (e no HTML). Tem falta de padronização aí.
A primeira dica é determinar tudo no CSS, e não direto no elemento.
ERRADO
<div style="margin:300px;" id="oi">
CORRETO
<div id="oi">
CSS:
#oi {
margin:300px;
}E valide, pode ser que tenha algo errado nos seus códigos. HTML: http://validator.w3.org/ / CSS: http://jigsaw.w3.org/css-validator/
cara é que o style alí é definido pelo php entendeu ? Dentro de um loop while, é assim:
<div class='multidraggable' style='left:".$antArrayImg['posLeft']."px; top:".$antArrayImg['posTop']."px;' id='".$antArrayImg['id']."' ...
o id que eu uso na div não tem nenhuma função css, só é utilizado pelo JS mais especificamente pelo script de capturar a posição. Não tem como atribuir a posição numa folha separada de css já que ela inclui dados PHP. Validei o código mas os erros que aparecem lá são os echos do PHP que o validador parece não entender.
É necessário mesmo postar o JS ? É que não gosto muito de mostrá-lo deu um trabalhão pra pesquisar e conseguir fazê-lo funcionar, mas pelo que vi ele está certo. Vou revê-lo enquanto isso eu posto a parte que exibe a div e a class dela.
while($antArrayImg = mysql_fetch_array($buscaQueryImg))
{
echo "<div class='multidraggable' style='left:".$antArrayImg['posLeft']."px; top:".$antArrayImg['posTop']."px;' id='".$antArrayImg['id']."' onClick='getPosicaoElemento(".$antArrayImg['id'].")' >";
echo '<img src="'.$antArrayImg['name'].'" width="auto" height="auto "/>';
echo '</div>';
echo '<input type="hidden" name="'.$antArrayImg['id'].'pos" id="'.$antArrayImg['id'].'pos">';
}
.multidraggable {
width:90px;
height:auto;
padding:3px;
background-color:#666; border-radius:2px;
}
** EDIT:**
Fiquei "encucado" com este problema e resolvi fazer uns testes, escolhi as posições tudo certinho e tirei um fto com o celular, era algo assim, a ordem:A
B
C
D
Anotei os números de left e top que o javascript dava, então removi o css e fiz o seguinte, coloquei os números manualmente:
<img src="http://www.pixelaria.org/media/upload/pixelart2/50c2cdcbe2c1fb7a1e6a459591fecc3a.gif" style="left:81px; top:25px;">
<img src="http://www.w3schools.com/dhtml/smiley.gif" style="left:101px; top:161px;">
<img src="http://www.habbost.site40.net/cutenews/data
<img src="http://www.pixelaria.org/media/upload/pixelart2/6cfef92fa31e7a2e3827ea1925975b99.png" style="left:80px; top:244px;">
E ao testar a ordem das imagens não ficou nada como o que eu havia desejado a ordem ficou a seguinte: A B C D.
Estou achando muito caroço nesse angu, já não sei o que tentar '-'.
Voltando com a div e a class multidraggable, olhem como a ordem ficou:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img97.imageshack.us/img97/1655/58035099.png&key=125e569dfdbf0945ce1d0e9b749db8fdc1153bdc7069f658da309411ffec7e81" alt="58035099.png" />
E o código fonte ficou assim:
<form method="post">
<input type="submit" name="envPos" style="border:0; background-color:#CCC; font-family:Tahoma, Geneva, sans-serif; float:right;" value="Salvar">
<input type="button" onClick="javascript:history.back(-1);" value="Voltar" style="border:0; background-color:#CCC; font-family:Tahoma, Geneva, sans-serif; float:right;"/>
<div class='multidraggable' style='left:101px; top:161px;' id='1' onClick='getPosicaoElemento(1)' ><img src="http://www.w3schools.com/dhtml/smiley.gif"/></div><input type="hidden" name="1pos" id="1pos"><div class='multidraggable' style='left:110px; top:206px;' id='2' onClick='getPosicaoElemento(2)' ><img src="http://www.habbost.site40.net/cutenews/data</div><input type="hidden" name="2pos" id="2pos"><div class='multidraggable' style='left:81px; top:25px;' id='3' onClick='getPosicaoElemento(3)' ><img src="http://www.pixelaria.org/media/upload/pixelart2/50c2cdcbe2c1fb7a1e6a459591fecc3a.gif"/></div><input type="hidden" name="3pos" id="3pos"><div class='multidraggable' style='left:80px; top:244px;' id='4' onClick='getPosicaoElemento(4)' ><img src="http://www.pixelaria.org/media/upload/pixelart2/6cfef92fa31e7a2e3827ea1925975b99.png"/></div><input type="hidden" name="4pos" id="4pos"> </form>Problema resolvido e tópico fechado, foi só colocar um position absolute que tudo resolveu.
Posta o código completo da página. Só pelo input não dá pra saber. Tu tem que trabalhar bem no seu CSS (e no HTML). Tem falta de padronização aí.
A primeira dica é determinar tudo no CSS, e não direto no elemento.
ERRADO
<div style="margin:300px;" id="oi">
CORRETO
<div id="oi">
CSS:
E valide, pode ser que tenha algo errado nos seus códigos. HTML: http://validator.w3.org/ / CSS: http://jigsaw.w3.org/css-validator/