Discussion :

[ridan]

Bonjour à tous

J'essaye de faire du drag'n'drop dans une div possédant un scroll horizontal (cf. pièce jointe). Le problème est quand je fais bouger un draggable à droite et que le scroll apparait, un décalage se crée entre la position de la souris et le draggable.

Ce problème apparait à la fois sous IE et firefox. La pièce jointe contient un exemple complet.

Si vous avez une idée !

Merci d'avance

[gwyohm]

Salut,

Le point que tu soulèves m'intéresse beaucoup. Je vais te proposer deux pistes, mais je suis très intéressé pour savoir comment tu vas résoudre ton problème.

Le problème vient du fait qu'on scroll un élément dans lequel se trouve le draggable.

1ère piste :
On ne s'embète pas :

Code :

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

1
2
3
4
5
6
7
 
<script>
  new Draggable( $('draggable'), { scroll : $('scrollable'), revert : true, ghosting : true, handle : "movehandler", zindex : 100000,
    onStart: function(drag, e) {
      $(document.body).insert(drag.element);
    }} );
</script>

Quand on commence le drag, on sort le draggable de son div initial et on le met dans le body. Bien sur on ne fait que contourner le problème..., il reste à gérer le moment ou on drop... (remettre en position initiale ou autre)

2ème piste : pas avancée du tout... et trop compliquée je pense

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
  new Draggable( $('draggable'), { scroll : $('scrollable'), revert : true, ghosting : true, handle : "movehandler", zindex : 100000,
    onStart: function(drag, e) {
      $("scrollable").observe("scroll", function(e){
        var pos = e.element().viewportOffset();
       // On fait un truc avec ca, mais quoi...
      }.bindAsEventListener(drag))
    } ,
    onEnd:function(drag, e){
      $("scrollable").stopObserving("scroll")}
    } );
</script>

[ridan]

Hello ^^

Merci pour ta réponse gwyohm L'idée d'un listener sur le scroll est intéressante. Je vais creuser ça et je te tiens au courant. ça ne sera fort probablement pas pour cette semaine probablement celle d'après. Cela dit toute nouvelle solution est la bienvenue !!

Merci d'avance

[le_chomeur]

question bète , mais pourquoi ne pas bloquer l'overflow , uniquement sur l'horizontal ??

[ridan]

Re,

Je travaille actuellement sur un script de gestion d'organigramme similaire à cogmap (http://www.cogmap.com/).

Au niveau du style j'ai fais en sorte que le scrollbar apparait dès que l'organigramme dépasse en largeur la div qui le contient. Faire bouger un nœud verticalement ne pose aucun soucis. Le faire bouger en horizontal par contre est problématique.

Je suis en train de voir du côté de dragdrop.js. Je soupçonne une erreur de calcul de la position du draggable.

[youpla77]

Bonjour,

après avoir lu ton problème, il me semble que c'est le même que le mien mais pour moi avec 2 scrolls l'un dans l'autre.

voir control-slider-div-overflow

J'ai aussi un declallage entre ma sourie et mon curseur sur les scrolls à l'interieur du scroll global lors ce que celui-ci n'est plus à l'origine.

Si tu as trouvé une solution ???

cordialement,

youpla77

[ridan]

Up !

Je me suis remis aujourd'hui à travailler sur la chose et c'est ... résolu

Le problème provenait effectivement de dragdrop.js. Pour résoudre le problème :

• Appliquer ce patch : http://dev.rubyonrails.org/attachmen...gdrop.js.patch

• Commenter le bout de code ci-dessous dans la méthode draw de la classe Draggable :

Code :

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

1
2
3
4
if(this.options.ghosting) {
      var r   = Position.realOffset(this.element);
      pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
    }

Merci pour votre aide !

[gwyohm]

Je me suis remis aujourd'hui à travailler sur la chose et c'est ... résolu

Le problème provenait effectivement de dragdrop.js. Pour résoudre le problème :

• Appliquer ce patch : http://dev.rubyonrails.org/attachmen...gdrop.js.patch

• Commenter le bout de code ci-dessous dans la méthode draw de la classe Draggable :

Code :

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

1
2
3
4
if(this.options.ghosting) {
      var r   = Position.realOffset(this.element);
      pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
    }

J'ai de nouveau été confronté au problème ; et ce coup ci pas moyen de le contourner.

j'ai essayé d'appliquer les corrections proposées, mais j'ai du raté un truc car le problème persistait.

J'ai donc fait une autre correction qui a l'avantage de ne pas modifier les scripts scriptaculous. Par contre, il faut descendre à la cave, ... et par un soupirail ! du coup il y a risque d'effets de bord...

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
 
// l'element qui doit être Draggable
var drag= $("toDrag");
// la drop zone qui doit scroller
var scrollDrop = $("scrollingDroppable");
 
new Draggable(drag, {
  onStart:dragStartListener,
  onEnd : dragEnd,
  // on défini bien la dropzone 
  scroll: scrollDrop
});
 
function dragStartListener(drag) {
  // au démarrage on attache un evenement sur le scroll du droppabe
  // on bind au draggable
  scrollDrop.observe("scroll", appendScrollToOffset.bind(drag));
}
 
function dragEnd(drag) {
  // à la fin, on supprime le listener
  scrollDrop.stopObserving("scroll");
}
 
// c'est là qu'on descend à la cave : le membre offset n'est pas documenté,
// sa modification à ce niveau est donc périlleuse
function appendScrollToOffset(e) {
  // on recupere l'element qui scroll
  var scrollingElement = e.element();
  // on redéfini le offset du Draggable
  this.offset = [-scrollingElement.scrollLeft, -scrollingElement.scrollTop];
}