Sortable.setSequence et effet

Version imprimable

13/07/2010, 12h07
gescolino

Sortable.setSequence et effet

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!

Bonjour,

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

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
 
// 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...

13/07/2010, 13h10
gescolino

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

Encore merci!
13/07/2010, 13h35
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?

en faisant comme ca:

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

13/07/2010, 14h27
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!!

Bien sur !

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

13/07/2010, 14h49
gescolino

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

A part un autre GRAND MERCI!