Discussion :

[dl_jarod]

Bonjour à tous,

Je veux utiliser Interface pour pouvoir trier des éléments et récupérer le tri pour l'enregistrer dans une base de données. Le tri fonctionne et mes éléments sont bien "drag & drop" et s'insèrent là où je les dépose, mais n'étant pas aguerri avec l'Ajax (je me limite à intégrer des scripts et en général cela me suffit), je n'arrive pas à utiliser la fonction permettant de récupérer l'ordre.

Voici mon code :

Le javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
$(document).ready(
	function () {
		$('div.sort').Sortable(
			{
				accept : 		'pages',
				helperclass : 	'sorthelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				opacity: 		0.5,
				fx:				200,
				revert:			true,
				floats:			true,
				tolerance:		'pointer'
			}
		)
	}
);
function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash);
};
</script>

Le html (simplifié) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="bloc_into">
<div class="sort">
<?php
while ($rown = mysql_fetch_array($resultn)){
?>
<div class="pages">
<div class="<? echo $class ; ?>">
<p>
<a href="<? echo $lien ; ?>.php?id=<?php echo $rown['id_pages'] ; ?> "><?php echo $rown['titre'] ; ?></a>
</p>
</div>
</div>
<?php
}
?>
</div>

C'est donc l'utilisation de la fonction Serialize qui me pose problème. Le but est donc de récupérer les id correspondants aux différentes position pour ensuite pouvoir passer ça via un bouton submit.

Voici la page de doc de cette fonction :

http://interface.eyecon.ro/docs/sort

Voilà si quelqu'un pouvait me filer un coup de main ce serait super sympa : je cale là-dessus depuis un bon bout de temps maintenant.

Merci d'avance

[dl_jarod]

J'avance !

J'ai enfin compris que ça fonctionnait avec les id.

Je réussi à récupérer les id triés. Avec le code suivant :

Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
function serialize(trier)
{
	serial = $.SortSerialize(trier);
	alert(serial.hash);
};

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="sort" id="trier">
<?php
while ($rown = mysql_fetch_array($resultn)){
?>
<div class="pages" id="<?php echo $rown['id_pages'] ; ?>">
<div class="<? echo $class ; ?>">
<p>
<a href="<? echo $lien ; ?>.php?id=<?php echo $rown['id_pages'] ; ?> "><?php echo $rown['titre'] ; ?></a>
</p>
</div>
</div>
<?php } ?>
</div>

Comment puis-je transmettre ces données (couple position / id) via un submit afin de les récupérer en php par après ?

La j'obtiens la liste via un lien qui m'ouvre une alert.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onClick="serialize(); return false;" >serialize all lists</a>

Je suppose que je dois modifier la fonction vu que l'alert est dedans...

Merci

[tiger63]

Hello
J ai un probleme de drag. (et non pas de drague hein ^^)
Voici j ai plusieurs boxs html du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="firstlist">
    <dl class="listyle" id="image_<?=$i?>"> 
       <dt class="product"> 
                <?='&nbsp;&nbsp;'.$row['name'].' '.$i.'';?><br/><br/>
               <img id="img-prod" src="<?=$img?>" height="188" width="212"/>
               <input type="checkbox" checked="checked" name="id[<?=$row['id']?>]" id="checkboxs" value="id" />
         </dt>	
     </dl>
    <dl class="listyle" id="image_<?=$i?>"> 
       <dt class="product"> 
                <?='&nbsp;&nbsp;'.$row['name'].' '.$i.'';?><br/><br/>
               <img id="img-prod" src="<?=$img?>" height="188" width="212"/>
               <input type="checkbox" checked="checked" name="id[<?=$row['id']?>]" id="checkboxs" value="id" />
         </dt>	
     </dl>
............
</div>

La mise en page est en css et se gere de la fcon qu'il y ai 3 box par lignes.
LA mise en place Html est nikel et me donne ce que je veux.

Pour ce qui est du code jquery, j ai utiliser cette fonction au chargement de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 $("#firstlist").sortable({ 
                    placeholder: "ui-selected", 
                    revert: false,
                    tolerance :"pointer",   
                });

Voila le probleme : Lorsque je deplace ma box rapidement pour la changer de place avec celle da cote, celle ci se deplace au bon endroit mais reviens aussitot a sa place d origine . Ce qui fait que j ai le drag and drop qui se fait pas
Par contre si je le fait lentement , bin ca fonctionne!

Pourriez vous m aider O grand manitou du web

Merki d avances!!

tiger63
ke le tigre soit en toi