Modifier le drag'n drop de Rico

**vallica** · 12/09/2006, 11h00

Bonjour tout le monde,

Voilà je voudrais essayer de créer un site avec une colonne gauche et droite dans lesquelles je pourrais déplacer des blocs (div) d'une colonne à l'autre.

J'ai utilisé un drag'n drop Rico : http://openrico.org/rico/demos.page?...nd_drop_simple

que j'ai intégré dans ma page dont voici le 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
<html>
<script src="prototype.js" type="text/javascript"></script>
<script src="rico.js" type="text/javascript"></script>
<head>
<title>Rico</title>
</head>
<body>
<table style="margin-bottom:8px" cellspacing="3" cellpadding="3">
<tr>
   <td valign="top" id="zonegauche" style="width:150px;background:#ffd773" >            
         <div style="width:150px;background:#f7a673;border:1px solid black" id="box1" onBlur="javascript:alert('j')">Recherche<br>Tous bordereaux<br>Hébergement<br>Bordereau unique<br>lien</div>
         <div style="width:150px;background:#f7a673;border:1px solid black" id="box2">Gestion des droits<br>lien<br>lien<br>lien<br>lien</div>
         <div style="width:150px;background:#f7a673;border:1px solid black" id="box3">Valeurs<br>lien<br>lien<br>lien<br>lien</div>     
    </td>    
    <td valign="top">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis diam et nisi. Aenean vestibulum, ante nec luctus fermentum, nisi nisl cursus eros, a fringilla purus urna ut odio. Sed ac pede eu turpis elementum imperdiet. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus placerat, lacus ut rutrum auctor, neque leo adipiscing felis, ac laoreet risus felis tempus eros. Pellentesque non magna sed orci semper porta. Phasellus lobortis orci pharetra sapien. Phasellus vitae dui. Cras elementum est et pede. In lobortis ligula et felis. Nunc in enim a pede pharetra aliquet. Donec in felis et augue vestibulum congue. Aliquam eu ligula. Curabitur sit amet magna. Donec mattis mauris id urna. Nunc nisi ante, tempor ornare, tincidunt sed, bibendum et, felis. 
    </td>
    <td valign="top" id="zonedroite" style="width:150px;background:#c6c3de">      
     </td>
</tr>
</table>
<script>
   dndMgr.registerDraggable( new Rico.Draggable('test-rico-dnd','box1') );
   dndMgr.registerDraggable( new Rico.Draggable('test-rico-dnd','box2') );
   dndMgr.registerDraggable( new Rico.Draggable('test-rico-dnd','box3') );
   dndMgr.registerDropZone( new Rico.Dropzone('zonegauche') );
   dndMgr.registerDropZone( new Rico.Dropzone('zonedroite') );
</script>
</body>
</html>

voici les librairies nécessaires :
http://openrico.org/rico/download_file/1.1.2/rico.js
http://openrico.org/dist/1.1.2/prototype.js

En fait tout marche bien, seulement je voudrais pouvoir enregistrer la position des box dans une base de données ou un cookie afin que l'utilisateur garde ses dispositions à chaque rechargement de page et chaque visite.

Vous pourrez constater que j'ai placé un onBlur sur une des box pour tester les différents évenements, mais je n'ai rien trouvé de très convaincant.
Mon idée était de déclencher une action coté serveur via Ajax dès que l'utilisateur relache la box... mais je ne sais comment implémenter cette solution, du moins la partie detection du relachement.

merci d'avance pour votre aide !

**rieppe** · 12/09/2006, 15h03

Salut,

Niveau relachement de la boite, tu ne peux pas utiliser l'évènement "onMouseUp" (qui doit correspondre au relâchement du bouton de la souris je crois) ?

**vallica** · 12/09/2006, 15h38

Salut,

J'ai essayé cette solution, mais si tu veux lorsque tu relache le clic gauche ton div est aspiré vers la zone cible, et en fait le onmouseup se déclanche avant que le div soit positionné dans son conteneur.

Mais j'ai trouvé sur le forum anglais de rico un début de piste, en fait dans une méthode de la librairie qui est la suivante :

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
_placeDraggableInDropZone: function(e) {
      var foundDropZone = false;
      var n = this.dropZones.length;
      for ( var i = 0 ; i < n ; i++ ) {
         if ( this._mousePointInDropZone( e, this.dropZones[i] ) ) {
            if ( this.dropZones[i].canAccept(this.currentDragObjects) ) {
               this.dropZones[i].hideHover();
               this.dropZones[i].accept(this.currentDragObjects);
               foundDropZone = true;
			   alert("Conteneur :"+this.dropZones[i].getHTMLElement().id+"\ndiv déplacé :"+this.dragElement.id+"\nposition fct du parent :"+this.dragElement.offsetTop);
               break; 
            }
         }
      }
      return foundDropZone;
   },

J'arrive à afficher la zone dans laquelle est le div ainsi que sa position top par rapport au div parent.

Ce que je cherche maintenant à faire, c'est premièrement remplacer mes alertes par un code qui me liste les offsetTop de chaque div de chaque conteneur, puis via Ajax de les insérer dans un cookies, une table en bdd ou dans la session PHP...

bref j'ai du boulot ! surtout que je ne connais rien à Ajax, donc si vous avez une idée elle sera la bienvenue !

**vallica** · 14/09/2006, 14h51

J'ai réussi à faire ce que je voulais, c'est à dire à sauvegarder en base de données la position des boxs dès qu'on drag-drog un div.

Si la solution interesse quelqu'un faites remonter le topic

**nagstef** · 25/06/2009, 23h49

Bonjour !!

Je viens de laisser un message sur le forum, à l'adresse suivante : ma demande de contribution
Si tu penses que tes travaux avec Rico peuvent m'aider, je t'en remercierai ..

Stéphane

Modifier le drag'n drop de Rico [Rico]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager