Récupérer la "position" de blocs Sortable

**charlyy** · 27/05/2009, 17h03

Bonjour à tous, cela fait quelques temps que je parcours votre forum et j'y trouve souvent de bonnes solutions, mais pour ce souci je n'ai pas vu de solutions (à part un message resté sans réponse)

Donc voilà :

J'ai des block "Catégorie" que je génère via un select, ces block s'empilent les un sous les autres, et grâce à jQuery Sortable on peut les déplacer (les monter et les descendre).

Jusque là tout va bien, mais seulement au moment de tout envoyer les bblock se remette dans leur ordre initial, ça vous vous en doutiez.

Donc l'ojectif c'est de les réafficher dans le on ordre, pour cela il me faut d'abord récupérer un n° de "position" ou un "ordre" de chaque block.

[premier bloc] -> position 1
[deuxième bloc] -> position 2
[troisième bloc] -> position 3

puis après modif ça devrait être

[premier bloc] -> position 1
[troisième bloc] -> position 2
[deuxième bloc] -> position 3

Évidement ce numéro "ordre" doit changer à chaque déplacement, après je pense qu'il y aura moyen de pouvoir réafficher tout ça grâce à ce numéro.

Les UI de Jquery sont limité, je n'ai pu que récupérer la position absolue (dont je me fous mais c'est pour le contexte

:

Code :

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

1
2
3
4
5
6
7
 
 
$(".sortable").sortable({
				update: function(event, ui)  
							{ 
							console.log (ui.position)
                                                          }

je suis étonné qu'il n'ai pas pensé à cette fonction...

voilà j'espère avoir été assez clair pour ce premier mesage, merci pour vos pistes jQuerry (et ajax).

si vous avez besoin que j'affiche d'autre bouts de code dites moi

merci !

charly

**Kerod** · 28/05/2009, 00h26

C'est un peu ce que tu recherches : http://www.developpez.net/forums/d73...d-drag-n-drop/

**charlyy** · 28/05/2009, 08h51

Merci Kerod,

du coup je me suis renseigné à partir du lien que tu m'as donné et je suis tomé sur ça http://www.scribd.com/doc/6374723/26...3233jqueryfrmt

ça à l'air intéressant, je le lis et j'vous dis

**Thewil** · 03/06/2009, 16h28

Tu as trouver comment faire finalement ? Car cela m'intéresse aussi.

Merci

**Kerod** · 03/06/2009, 16h43

Quelle position ?
Toutes les positions dans la liste sont récupérées en PHP ...

**Thewil** · 03/06/2009, 17h08

En fait moi j'ai un ul sortable comme Ceci et donc je voudrais récupérer l'ordre de mes éléments.

Sauf que moi je n'ai pas de PHP derrière. En gros je voudrai que dès que je passe un élément en premier j'appelle une fonction javascript et non enregistrer ça dans une base de données.

Merci

**Kerod** · 03/06/2009, 17h22

Tu as regardé le lien que j'ai donné plus haut ?

J'y ai mis un code : http://www.developpez.net/forums/m4302665-13/

Code :

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

serial = $( "#sortable" ).sortable('serialize');

Regarde ce que ça te donne et tu verras que tu peux l'avoir

**Thewil** · 03/06/2009, 17h40

Lorsque je fais ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	$(sortable).sortable( {
		placeholder : 'ui-state-highlight',
		cursor : 'crosshair',
		revert : true,
	    update : function() {
	        serial = $(sortable).sortable('serialize');
	        alert(serial);
	    }
 
	});
	$(sortable).disableSelection();

serial me renvoie une chaîne vide.

Et dans mon cas je n'ai pas besoin d'apeller $.ajax ?

Moi en fait lors de l'update je voudrais pouvoir récupérer la valeur de la variable serial et suivant cette valeur faire des traitements javascript.

Désolé mais la j'avoue je suis totalement perdu

**Kerod** · 03/06/2009, 19h51

Si l'id de ton ul est contenu dans sortable alors ok il doit avoir un problème. Si non, ben tu dois remplacer sortable par "#id_ul"

**Thewil** · 03/06/2009, 20h22

En fait ceci est contenu dans une fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
fonction nomFonction(sortable) {
	$(sortable).sortable( {
		placeholder : 'ui-state-highlight',
		cursor : 'crosshair',
		revert : true,
	    update : function() {
	        serial = $(sortable).sortable('serialize');
	        alert(serial);
	    }
 
	});
	$(sortable).disableSelection();
}

Et donc j'appelle ma fonction comme ceci, nomFonction($("#sortable")).
Ça marche impeccable car tout mes paramètres de sortables sont appliqués (genre le cursor et le revert marche bien) mais le serial me retourne une chaîne vide.

Donc je ne sais pas d'où vient le problème. Mais je ne comprend pas comment faire pour récupérer la valeur de variable dans le fichier js et faire des actions en fonction de sa valeur. Mais encore faut-il que serial ne me retourne pas une chaîne vide

**Kerod** · 04/06/2009, 09h54

Mon code fonctionne correctement vu que je récupère tous les éléments de ma liste avant de les envoyer via AJAX. Donc le problème vient que de ton code.

Pourquoi tu passes un objet au lieu de passer directement l'id ?

Code :

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

nomFonction("#sortable")

**danielhagnoul** · 05/06/2009, 00h50

Bonsoir.

Le code de Kerod fonctionne parfaitement, mais voici un exemple dans le style de ce que vous souhaitez faire :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../styles/principal.css" media="screen" />
    <style type="text/css">
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }
        #sortable li {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            padding-left: 1.5em;
            font-size: 1.4em;
            height: 18px;
        }
        #sortable li span {
            position: absolute;
            margin-left: -1.3em;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.1.custom.css" media="screen" />
    <!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript">
        var pos = [];
 
        function afficherPos(){
            var s = "Liste : ";
 
            for(var i = 0; i < pos.length; ++i){
                s += pos[i] + ', ';
            }
 
            $("#affiche").html(s);
 
            $("#"+pos[3]).css("color","red");
        }
 
        function maListe(idname) {
            var obj = $("#"+idname);
 
            obj.sortable({
                placeholder : 'ui-state-highlight',
                cursor : 'crosshair',
                revert : true,
                update : function(){
                    pos = obj.sortable('toArray');
 
                    afficherPos();
                }
            });
 
            obj.disableSelection();
        }            
 
        $(document).ready(function(){
 
            maListe("sortable");
 
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div class="demo">
        <ul id="sortable">
            <li id="listItem_1" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1
            </li>
            <li id="listItem_2" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2
            </li>
            <li id="listItem_3" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3
            </li>
            <li id="listItem_4" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4
            </li>
            <li id="listItem_5" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5
            </li>
            <li id="listItem_6" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6
            </li>
            <li id="listItem_7" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7
            </li>
        </ul>
        </div><!-- End demo -->
         <div id="affiche"></div>
    </div>
</body>
</html>

**Thewil** · 05/06/2009, 09h44

Merci beaucoup à vous du coup c'est exactement ce que j'avais fait avec le 'toArray' et ça marche plutôt bien.

Mais je n'ai toujours pas compris comment marchait serializable

Récupérer la "position" de blocs Sortable

jQuery

Partager

Partager