Modifier le drag'n drop de Rico
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:
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 !
