Discussion :

[gescolino]

Bonjour,

J'ai réalisé une liste triable avec le comportement Sortable ceci permettant de modifier la liste.
J'ai aussi créé un bouton de réinitialisation qui permet de revenir à la liste de départ grâce à la fonction setSequence.

Je souhaiterais maintenant ajouter un effet aux éléments qui reviennent à leur place initiale.

Quelqu'un aurait il une idée?

Merci d'avance!

[gwyohm]

Bonjour,

Sur la demo des sortables,
Avec la console firefox, j'ai executé ce code :

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
 
// un peu de style en dur ... on teste...
$("list").relativize();
var listDim = $("list").getDimensions();
$("list").setStyle({width: listDim.width + "px", height: listDim.height + "px"});
// pour pouvoir avoir une sequence...
$("list").select("li").invoke("identify");
// A quoi ressemble la sequence ?
Sortable.sequence('list');
// Ajoutons une nouvelle methode
Sortable.setSequenceWithEffect = function(element, newSequence) {
   element = $(element);
   var baseOpts = arguments[2] || {};
   var options = Object.extend(this.options(element), baseOpts  );
    var nodeMap = { };
 
    this.findElements(element, options).each( function(n) {
        if (n.id.match(options.format))
            nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
    });
    var effects = [];
    var pos = 0;
    newSequence.each(function(id) {
      var n = nodeMap[id][0];
      if (n) {
        n.absolutize();
        effects.push(new Effect.Move(n, {sync:true, mode:'absolute', y: pos}));
        pos += n.getHeight();
      }
   });
   // a la fin faisons ce que fait scriptaculous
   new Effect.Parallel(effects, {duration:1, afterFinish: Sortable.setSequence.curry(element, newSequence, baseOpts)});
}
// testons 
Sortable.setSequenceWithEffect("list", ["4","3","2","1"]);

Ca n'est pas parfait mais ca peut te donner des idées...

[gescolino]

Super merci d'avoir pris le temps de regarder.
Je fais des tests et je te redis.

Encore merci!

[gescolino]

Grâce à ton exemple j'ai bien pu afficher l'effet recherché.

Cependant une fois l'effet appliqué, la position des éléments passe en absolute et il est ensuite impossible de retrier la liste.

J'ai donc essayé de repasser la position en relative à la fin de l'effet mais bien entendu les éléments reviennent dans l'ordre modifié et non initial.

Ce que je vois serait de réussir à figer la position de l'item de la liste en la passant en relative avec une valeur de top=0 et left=0

Une petite idée pour résoudre ce problème?

[gwyohm]

en faisant comme ca:

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
Sortable.setSequenceWithEffect = function(element, newSequence) {
   element = $(element);
   var baseOpts = arguments[2] || {};
   var options = Object.extend(this.options(element), baseOpts  );
    var nodeMap = { };
 
    this.findElements(element, options).each( function(n) {
        if (n.id.match(options.format))
            nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
    });
    var effects = [];
    var pos = 0;
    newSequence.each(function(id) {
      var n = nodeMap[id][0];
      if (n) {
        n.absolutize();
        effects.push(new Effect.Move(n, {sync:true, mode:'absolute', y: pos}));
        pos += n.getHeight();
      }
   });
  // on lance l'effet
   new Effect.Parallel(effects, {
     duration:1, 
     // a la fin de l'effet
     afterFinish: function(){
       newSequence.each(function(id) {
         var n = nodeMap[id][0];
         if (n) {
           // on relativize et on vire les top et left
           n.relativize().setStyle({top:"",left:""});
         }
       });
       // on lance le setSequence standad (sans le .curry !)
       Sortable.setSequence(element, newSequence, baseOpts);
   }
});
}

[gescolino]

PARFAIT!

Afin que la liste reste au même en droit j'ai ajouté un x: VALEUR dans l'effet de mouvement.

Encore une petite question, serait il possible que les éléments se déplacent depuis leur position pour atteindre la position finale au lieu de tous se placer en 0,0 ?

En tous cas merci beaucoup!!

[gwyohm]

Bien sur !

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
Sortable.setSequenceWithEffect = function(element, newSequence) {
   element = $(element);
   var baseOpts = arguments[2] || {};
   var options = Object.extend(this.options(element), baseOpts  );
    var nodeMap = { };
 
    this.findElements(element, options).each( function(n) {
        if (n.id.match(options.format))
            nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
    });
    var effects = [];
    var pos = 0;
    // il faut faire un absolutize en partant du dernier ... dans l'ordre de la liste actuelle 
    // on recupere donc les enfants, qu'on inverse (les derniers seront les premiers comme dirait un certain chanteur
    element.childElements().reverse().invoke("absolutize");
    newSequence.each(function(id) {
      var n = nodeMap[id][0];
      if (n) {
        effects.push(new Effect.Move(n, {sync:true, mode:'absolute', y: pos}));
        pos += n.getHeight();
      }
   });
 
    new Effect.Parallel(effects, {duration:1, afterFinish: function(){
     newSequence.each(function(id) {
      var n = nodeMap[id][0];
      if (n) {
        n.relativize();
        n.setStyle({top:"",left:""});
        pos += n.getHeight();
      }
   })
     Sortable.setSequence(element, newSequence, baseOpts)
   }
 
});
 
}

[gescolino]

Rapide, efficace je n'ai rien d'autre à rajouter.

A part un autre GRAND MERCI!