[jQuery] DIV animate con scambio posizione

**lapiadina** · 05-11-2012, 18:04

Ciao a tutti,
ho 3+ DIV uno sotto l'altro, ognuno ha un pulsante "up" e uno "down", vorrei fare in modo che al click faccia slittare su o giù il div e di conseguenza anche il div settostante o precedente, in modo che si scambino posizione e che cambi anche il value degli input text all'interno dei due div interessati.
Qualcosa son riuscito fare, ecco qua il codice:

codice:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#box1 {
position:absolute;
background-color: #F90;
top: 100px;
left:50px;
width:90px;
height:50px;
margin:5px;
text-align:center;
}
#box2 {
position:absolute;
background-color: #6CF;
top: 150px;
left:50px;
width:90px;
height:50px;
margin:5px;
text-align:center;
}
#box3 {
position:absolute;
background-color: #6F6;
top: 200px;
left:50px;
width:90px;
height:50px;
margin:5px;
text-align:center;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
 function upDiv(id){
   $("#box"+id).animate({"top": "-=50px"}, "slow");
   var ValueUp = $("#input"+id).val();
   $("#input"+id).val(parseInt(ValueUp)-1);
   var newValueUp = $("#input"+id).val();
   // box precedente
   $("#box"+(parseInt(newValueUp))).animate({"top": "+=50px"}, "slow");
   var ValueUp2 = $("#input"+(parseInt(newValueUp))).val();
   $("#input"+(parseInt(newValueUp))).val(parseInt(ValueUp2)+1);
 }
 function downDiv(id){
   $("#box"+id).animate({"top": "+=50px"}, "slow");
   var ValueDown = $("#input"+id).val();
   $("#input"+id).val(parseInt(ValueDown)+1);
   var newValueDown = $("#input"+id).val();
   // box successivo
   $("#box"+(parseInt(newValueDown))).animate({"top": "-=50px"}, "slow");
   var ValueDown2 = $("#input"+(parseInt(newValueDown))).val();
   $("#input"+(parseInt(newValueDown))).val(parseInt(ValueDown2)-1);
 }
</script>
</head>
<body>
<form name="form1" method="post" action="test_result.asp">
<div id="box1" title="1">
  up down

  <input type="text" id="input1" name="input1" value="1" size="2">
</div>
<div id="box2" title="2">
  up down

  <input type="text" id="input2" name="input2" value="2" size="2">
</div>
<div id="box3" title="3">
  up down

  <input type="text" id="input3" name="input3" value="3" size="3">
</div>
</form>
</body>
</html>

con il codice postato qui sopra funziona solo in parte, perchè va bene solo al primo click su "up" o "down" poi si sballa tutto..
In pratica l'errore è dovuto al fatto che richiamo l'ID del div prec/succ che al primo click va bene, ma poi ovviamente ai click successivi l'ID non è più il prec/successivo.
Quindi penso basterebbe richiamare il DIV successivo/precedente in modo relativo, ma non so come fare..
Oppure posso richiamare un DIV non per l'ID ma per attributo?
Scritto così sembra un pò incasinato

ma provate a copiare il codice della pagina html e si capisce subito cosa vorrei ottenere.
Grazie.

**lapiadina** · 06-11-2012, 18:47

ho fatto ulteriori modifiche ma ancora c'è qualche problemino, ecco qua una demo: http://webtest99.altervista.org/test.html

il codice js utilizzato è questo:

codice:

<script type="text/javascript">
 function upDiv(id){
   $("#box"+id).animate({"top": "-=50px"}, "slow");
   var ValueUp = $("#input"+id).val();
   $("#input"+id).val(parseInt(ValueUp)-1);
   var newValueUp = $("#input"+id).val();
   // box posizione precedente
   $('div[title="'+newValueUp+'"]').animate({"top": "+=50px"}, "slow");
   var ValueUp2 = $('input[value="'+newValueUp+'"]').val();
   $('input[value="'+newValueUp+'"]').val(parseInt(newValueUp)+1);
   // cambio attributi
   $('div[title="'+newValueUp+'"]').attr("title",ValueUp);  // div precedente
   $("#box"+id).attr("title",newValueUp);  // div cliccato
   // nascondo arrowUp se diventa il numero 1
   if (ValueUp = 1) $('div[title=1] #arrowUp').css('display', 'none');
   // ripristino l'arrowDown nel caso in cui fosse stato l'ultimo
   if (ValueUp = 3) {$('div[title=3] #arrowDown').css('display', 'block')};
   return false;
 }
 function downDiv(id){
   $("#box"+id).animate({"top": "+=50px"}, "slow");
   var ValueDown = $("#input"+id).val();
   $("#input"+id).val(parseInt(ValueDown)+1);
   var newValueDown = $("#input"+id).val();
   // box posizione precedente
   $('div[title="'+newValueDown+'"]').animate({"top": "-=50px"}, "slow");
   var ValueDown2 = $('input[value="'+newValueDown+'"]').val();
   $('input[value="'+newValueDown+'"]').val(parseInt(newValueDown)-1);
   // cambio attributi
   $('div[title="'+newValueDown+'"]').attr("title",ValueDown);  // div precedente
   $("#box"+id).attr("title",newValueDown);  // div cliccato
   // nascondo arrowDown se diventa l'ultimo numero
   if (ValueDown = 3) {$('div[title=3] #arrowDown').css('display', 'none')};
   // ripristino l'arrowUp nel caso in cui fosse stato il primo
   if (ValueDown = 1) {$('div[title=1] #arrowUp').css('display', 'block')};
 }
</script>

un aiutino?

Discussione: [jQuery] DIV animate con scambio posizione

Strumenti discussione

Ricerca discussione

Visualizza

[jQuery] DIV animate con scambio posizione

Permessi di invio