Discussion :

[fefe69]

Bonjour a tous,

J'utilise le Drag&Drop de Scriptaculous et j'ai un soucis concernant l'ordre de mes objets.

J'ai a droite de ma page une liste d'images et je voudrais les mettre dans des div situés sur la gauche. Tout se passe normalement, j'ai bien mon drag & drop qui marche, je récupère bien tout le contenu de tout mes div mais j'aurais cependant quelques questions:

- Pour sérializer le contenu du div dans lequel je viens de déplacer mon image, je récupère la totalité de mon div en faisant une boucle et un childNodes.item(i).
Est-ce qu'il y a une solution simple comme l'utilise Scriptaculous dans les listes sortable ?

- Lorsque j'ai par exemple deux images dans un div et que je souhaite en ajouter une troisième, je suis obligé de la rajouter à la suite, n'est-il pas possible de mettre mon image avant la 1ere ou entre les deux ?

- Comment enlever l'effet lorsqu'on vient de droppé un élement, j'ai l'élèment qui part d'un coin de l'écran pour faire une transition vers le point où je viens de le déposer ...

Merci a tout ceux qui pourront m'aider.

Bonne journée,

[gwyohm]

Salut,
Voici mes suggestions :

- Pour sérializer le contenu du div dans lequel je viens de déplacer mon image, je récupère la totalité de mon div en faisant une boucle et un childNodes.item(i).

admettons que la div dans laquelle tu dropes tes images ait l'ID "target",

Code :

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

1
2
3
4
 
var childElems = $("target").childElements();
var ids = childElems .invoke("identify").join(",");
var srcs = childElems.pluck("src");

et tu récupères la liste des ids en une string séparée par des virgules et un tableau des src des images...

- Lorsque j'ai par exemple deux images dans un div et que je souhaite en ajouter une troisième, je suis obligé de la rajouter à la suite, n'est-il pas possible de mettre mon image avant la 1ere ou entre les deux ?

J'ai déjà joué à ca ; le truc, c'est d'implémenter le onHover du droppable, et de jouer sur les positions du draggable et le contenu du droppable.
Ensuite, moi j'ai une div dont l'Element prototype est variabilisé en tempoDiv, qui a un style en pointillé qui me sert à montrer ou va aller mon objet dragger.
Je deplace cette div dans le droppable, et au moment du drop, j'insère systématiquement après tempoDiv le drag.

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
onHover:function(drag, drop, pct) {
  // on recupere les images dejà presentes :
  var images= drop.select( "img" );
  if(images.length == 0) {
    // facile on insere le tempo div
    drop.insert({bottom: tempoDiv});
  } else {
    // on recupere la position du drag
    var posDrag = drag.cumulativeOffset();
    // Pour chaque image
    for(var i=0;i< images.length; i++) {
      // recupere la position de l'image
      var imgPos = images[i].cumulativeOffset();
      // recupere la dimension de l'image
      var imgDim = images[i].getDimensions();
      // je ne traite que le cas où tes images vont l'une sous l'autre (elles pourraient aller l'une a coté de l'autre, tu n'auras aucun mal a changer le code...
      // si on est au dessus de l'image
      if(posDrag.top >= imgPos.top && posDrag.top <= imgPos.top + imgDim.height) {
        if(posDrag.top < imgPos.top + (imgDim.height / 2) ) {
          // si tu es sur sa moitié sup on insere la div temporaire avant l'image
          images[i].insert({before: tempoDiv});
        } else {
          // si tu es sur sa moitié inf on insere la div temporaire après l'image
          images[i].insert({after: tempoDiv});
        }
        break;
      }
    }
  }
}

- Comment enlever l'effet lorsqu'on vient de droppé un élement, j'ai l'élèment qui part d'un coin de l'écran pour faire une transition vers le point où je viens de le déposer ...

Code :

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

1
2
3
4
5
6
 
new Draggable(this.element, {
  reverteffect:function(element, top_offset, left_offset) {
  new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: 0})
}
});