Contactez-nous
Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81
Tutorial Drag and Drop avec Rico
Introduction
Voilà un exemple complet (mais simple) pour faire un drag & drop (glisser-déposer en français) en Rico.
Le code HTML ci-dessous se divise en plusieurs zones :
- Dans le header
- on définit les styles
- on inclut la librairie prototype
- on inclut la librairie rico
- on inclut le fichier ricoDnd.js (décrit plus loin dans l'article)
- Dans le body
- on définit deux zones "draggables" avec pour id drag1 et drag2
- Attention : il faut définir un style explicitement dans ces zones pour contourner un bug de rico...
- ensuite on définit les zones d'arrivées du drag and drop
- on leur met juste la class kitDropZone. On verra dans le fichier javascript que tous les objets de class kitDropZone seront convertis en zones d'arrivées (dropZone)
- Un formulaire permet de récupérer les données droppées (note, le formulaire va nul part, ça sort du cadre de ce tutorial)
<html>
<head>
<title>Drag and Drop with Rico. www.kitpages.fr</title>
<style type="text/css">
body {
font-family: Verdana;
}
ul {
list-style:none;
}
li.draggable {
border:1px solid black;
width:200px;
}
</style>
<script language="javascript" type="text/javascript"
src="prototype-1.4.0.js"></script>
<script language="javascript" type="text/javascript"
src="rico-1.1.2.js"></script>
<script language="javascript" type="text/javascript"
src="ricoDnd.js"></script>
</head>
<body>
<div id="dragZone">
<h2>Liste des objets à faire glisser</h2>
<ul>
<li class="draggable" id="drag1" style="background:#8080FF;"> txt 1
</li>
<li class="draggable" id="drag2" style="background:#8080FF;"> txt 2
</li>
</ul>
</div>
<div id="dropZone">
<h2>Liste des zones d'arrivées</h2>
<form action="#">
<ul>
<li><input class="kitDropZone" type="text" name="zone1"/></li>
<li><input class="kitDropZone" type="button" name="zone2"/></li>
</ul>
<input type="submit" value="send"/>
</form>
</div>
</body>
</html>
Le code Javascript
Si on veut personnaliser un peu son drag & drop avec Rico, l'idée est de surcharger les classes Rico.Dropzone et Rico.Draggable pour qu'elles se comportent comme on le souhaite.
Ensuite on attend le onload du navigateur et on configure réellement les zones qu'on veut rendre "draggables" ou qu'on veut transformer en cible (dropZone).
Le code javascript ci-dessous se divise en 3 parties
- Définition de la façon dont vont réagir les zones d'arrivées (dropzone)
- Dans notre cas, on veut que la zone d'arrivée récupère le texte contenu dans l'élément glissant
- Définition de la façon dont vont réagir les éléments glissables (draggable)
- Dans notre cas, on veut que l'élément de départ soit recopié et que l'élément qui glisse réellement soit une copie du contenu de l'élément de départ.
- configuration réelle des éléments
- sur window.onload, on appelle la fonction initRicoDnd
- on définit les éléments "drag1" et "drag2" comme glissants
- on définit tous les éléments de classe "kitDropZone" comme cibles potentielles des élements glissants
Voilà le fichier ricoDnd.js
////
// customize DropZone
////
var KitpagesDropzone = Class.create();
KitpagesDropzone.prototype = Object.extend (
Rico.Dropzone.prototype,
{
accept: function(draggableObjects) {
var htmlElement = this.getHTMLElement();
if ( htmlElement == null )
return;
n = draggableObjects.length;
for ( var i = 0 ; i < n ; i++ ) {
var theGUI = draggableObjects[i].getDroppedGUI();
if (
RicoUtil.getElementsComputedStyle( theGUI, "position" ) ==
"absolute" ) {
theGUI.style.position = "static";
theGUI.style.top = "";
theGUI.style.top = "";
}
htmlElement.value = theGUI.innerHTML;
}
}
});
////
// customize Draggable
////
KitpagesDraggable = Class.create();
KitpagesDraggable.prototype = Object.extend (
Rico.Draggable.prototype,
{
getSingleObjectDragGUI: function() {
var el = this.htmlElement;
var div = document.createElement("div");
div.className = 'draggable';
new Insertion.Top( div, el.innerHTML);
return div;
}
});
////
// onload configuration
////
Event.observe(window, 'load', initRicoDnd, false);
function initRicoDnd() {
// enregistre les éléments "glissables"
dndMgr.registerDraggable(
new KitpagesDraggable('test-rico-dnd','drag1') );
dndMgr.registerDraggable(
new KitpagesDraggable('test-rico-dnd','drag2') );
// enregistre les zones cibles
var dropList = document.getElementsByClassName("kitDropZone");
dropList.each(function(el) {
dndMgr.registerDropZone( new KitpagesDropzone(el) );
});
}
Conclusion et références
Les explications ne sont pas très peaufinées, mais le code fonctionne. N'hésitez pas me laisser des commentaires, il me permettront d'améliorer la clareté de ce tutoriel.
Vous pouvez télécharger les sources et les librairies de ce tutorial à l'adresse ici.
Dans ce tutoriel, j'utilise les 2 exellentes librairies Rico et Prototype
Commentaires
Ajouter un commentaire