Discussion :

[Nounjog]

Bonjour à tous,

je suis actuellement entrain de developper un module de gestion de planning. C'est à dire une sorte d'agenda ou l'utilisateur pourrait modifier l'heure de ses rendez-vous.

Pour le moment j'essaye simplement de pouvoir trier les rendez vous les uns à la suite des autres (pas d'heure de début précise donc).

Ce que j'ai réussi :
Modification d'un RDV en restant dans un même jour

Là ou je bloque :

1) Déplacer le RDV dans un autre jour (si il y a de la place le mettre en fin de liste, si non le mettre à la place du dernier RDV)
2) Déplacer le RDV dans un jour sans RDV (mettre le RDV aprés le dernier RDV et non forcément au jour où il a été déposé)

Je pense que mon problème vient du fait que je n'arrive pas à detecter que le RDV a été déplacé de liste et dans quelle liste il atterit.

J'ai essayé sans grand résultat:

-Identifier l'item precedent avec ui.item.prev(), notamment pour le point 1
-Identifier l'item suivant avec ui.item.nextAll(), notamment pour le point 2

A chaque fois l'item envoyait les données de la liste de début et non celle d'arrivée, alors que j'utilise l'event STOP. Si vous savez pourquoi ou comment réparer ça je veux bien l'info, car j'ai déjà codé la partie de détection (par exemple si prev et next sont undefined ou si seulement next est undefined)

-Utilisation de serialize (aprés avoir codé ma propre fonction faisant plus ou moins le même boulot...), mais cette methode semble s'obstiner à prendre les informations d'une seule liste et non tous les élements triables.



Voici juste une petite aperçu de ce que devrait avoir l'air le tableau graphiquement (le reste du code étant assez lourd et divisé en plusieurs fichiers je ne peux pas vraiment le mettre, il ne sera quasiment pas lisible):

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
 
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">10/07</a></li>
		<li><a href="#tabs-2">11/07</a></li>
	</ul>
	<div id="tabs-1">
		<ul id="sortable1" class="connectedSortable ui-helper-reset">
			<li class="ui-state-default">RDV 1</li>
			<li class="ui-state-default">RDV 2</li>
			<li class="ui-state-default">RDV 3</li>
		</ul>
	</div>
	<div id="tabs-2">
		<ul id="sortable2" class="connectedSortable ui-helper-reset">
			<li class="ui-state-highlight">RDV 1</li>
			<li class="ui-state-highlight">RDV 2</li>
			<li class="ui-state-highlight">RDV 3</li>
		</ul>
	</div>
</div>

Merci d'avance !

PS: Je reste à votre disposition pour d'éventuels compléments

[Nounjog]

Voici un extrait de mon code JS qui pourrait peut être vous aider, je rappel que je cherche a récuperer les éléments adjacents à mon objet déplacé, ou voir si il est seul dans la liste. Pour l'instant ui.item.prev() ui.item.nextAll() me retourne les voisins de l'ancienne position et non de la nouvelle.

Code JS :

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
25
26
27
28
29
30
             $('[id*=sortable]').bind('sortstop', function(event, ui) {
 
                    var prevId = ui.item.prev().attr("idVid");
                    var nextId = ui.item.nextAll().attr("idVid");
 
                    var ind = ui.item.index();
                    console.log(ui.item.prev()+"=>"+ui.item.nextAll());
 
                    jQuery.ajax({
                        type: "POST",
                        url: "../controller/modPlan.php",
                        data : "idVid="+ idVid+"&prevId="+prevId+"&nextId="+nextId,
                        success :
                            function(){
                            jQuery.ajax({
                                type: "POST",
                                url: "../controller/sortVid.php",
                                data : "idVid="+ idVid,
                                success :
                                    function(){
 
                                    //document.location.href="planning.php"					
                                }
 
                            })				
                        }
 
                    })
 
                });