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

Version imprimable

27/05/2009, 17h03
charlyy

Récupérer la "position" de blocs Sortable
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:

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
28/05/2009, 00h26
Kerod

C'est un peu ce que tu recherches : http://www.developpez.net/forums/d73...d-drag-n-drop/
28/05/2009, 08h51
charlyy

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 :)
03/06/2009, 16h28
Thewil

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

Merci
03/06/2009, 16h43
Kerod

Quelle position ?
Toutes les positions dans la liste sont récupérées en PHP ...
03/06/2009, 17h08
Thewil

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
03/06/2009, 17h22
Kerod

Tu as regardé le lien que j'ai donné plus haut ? :roll:
J'y ai mis un code : http://www.developpez.net/forums/m4302665-13/

Code:

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

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

Lorsque je fais ceci
Code:

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 :calim2:

03/06/2009, 19h51
Kerod

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"

En fait ceci est contenu dans une fonction
Code:

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 ;)

04/06/2009, 09h54
Kerod

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:

nomFonction("#sortable")

Bonsoir.

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

Code:

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>

05/06/2009, 09h44
Thewil

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 :)