script.aculo.us. drag and drop
Le framework script.aculo.us. est très utile pour rendre vos applications user-friendly.
Nous allons apprendre à utiliser le drag and drop.
Mise en place de script.aculo.us.
Voici les étapes nécessaires pour la mise en place du framework script.aculo.us
- Téléchargement
- Création de l’arborescence
Téléchargement script.aculo.us
Nous allons commencer par télécharger la librairie script.aculo.us sur le site officiel.
librairie script.aculo.us
Création de l’arborescence
Pas de prise de tête, on va faire une arborescence très simple.
On va décompresser la librairie script.aculo.us. et copier les dossier lib et src pour les mettre dans la racine
de notre dossier dragNdrop. Et on va créer notre dossier image, où seront stockées les images à manipuler.
Comme je suis sympa, je vous ai préparé l’arborescence. 
Fonctionnement du Drag And Drop
Le fonctionnement du Drag And Drop se divise en 4 étapes.
La première partie, c’est de définir nos conteneurs que l’on va manipuler.
Pour ceci on va utiliser la balise <div>.
Après nous allons définir les dimensions de nos conteneurs en utilisant le css.
C’est dans cette 3ème étape que nous allons faire appel à notre framework script.aculo.us. par le biais
de fonctions javascript.
Enfin nous feront appel à ces fonctions JS en utilisant onload, onmousedown et onmouseup.
Création de nos conteneurs
Nous allons créer notre fichier index.html.
Nous allons créer un premier conteneur que l’on va appeler plateau.
Dans celui-ci deux autres conteneurs (boite1 et boite2) seront créés.
<body> <div id="plateau"> <div id="boite1"> <img id="image1" src="./image/1.png" /> </div> <div id="boite2"> <img id="image2" src="./image/2.png" /> </div> </div> </body>
Le résultat :
exemple script.aculo.us.
Définitions des dimensions de nos boîtes
Bon beh la, ce n’est pas compliqué c’est du css tout basic.
<head>
<style type="text/css">
#boite1 {
border: 1px solid #000000;
width: 116px;
height: 97px;
padding: 5px;
margin-left: 10px;
margin-bottom: 10px;
float: left;
}
#boite2 {
border: 1px solid #000000;
width: 116px;
height: 97px;
padding: 5px;
margin-left: 10px;
margin-bottom: 10px;
float: left;
}
#plateau {
width: 1024px;
height: 500px;
border: 0px solid #FF0000;
}
</style>
</head>
Cela rend déjà mieux :
exemple script.aculo.us.
Les fonctions javascripts
On va faire appel au framework script.aculo.us.
<script src="./lib/prototype.js" type="text/javascript"></script> <script src="./src/effects.js" type="text/javascript"></script> <script src="./src/dragdrop.js" type="text/javascript"></script>
On va créer nos fonctions javascripts.
Cette fonction change le style de la bordure de notre boîte (en pointillé).
function cache ( id ) {
id.style.border = '1px dashed #000000';
}
Et celle-ci rend la bordure de la boîte continu.
function cache ( id ) {
id.style.border = '1px solid #000000';
}
Et la fonction la plus importante ; celle qui définit les boites à déplacer.
new Draggable : définit la boite à manipuler.
Sortable.create : définit le plateau où les boites pourront se déplacer.
var drag1;
var drag2;
function init () {
drag1 = new Draggable('boite1', {ghosting: true});
drag2 = new Draggable('boite2', {ghosting: true});
Sortable.create('plateau',{
tag:'div',
overlap:'horizontal',
ghosting: true,
constraint: false
});
}
Appel de nos fonctions JS
Pour préparer le plateau il suffit d’utiliser l’attribut onload qui fera appel à notre fonction init().
Et pour faire l’effet de transparence, il faut utiliser l’attribut onmousedown et onmouseup.
<body onload="init()"> <div id="plateau"> <div id="boite1"> <img id="image1" src="./image/1.png" onmousedown="cache(this);" onmouseup="affiche(this);"/> </div> <div id="boite2"> <img id="image2" src="./image/2.png" onmousedown="cache(this);" onmouseup="affiche (this);"/> </div> </div> </body>
Et voila c’est fini
Voila le code source complet.
Note de l'article
(4 votes, moyenne: 4,25 max : 5)
Loading ...
juin 10th, 2009 at 17 h 29 min
le code ne marche pas sous firefox 3
juin 11th, 2009 at 0 h 33 min
Salut nhende,
quand tu télécharge le code source complet cela ne marche pas chez toi ?
C’est vrai qu’en téléchargement c’est pas toujours évident de faire des démos.
je vais mettre en exemple en ligne du drag and drop.
C’est tout de suite plus parlant.
merci pour ton apport.
novembre 11th, 2009 at 18 h 13 min
Nickel chrome. Merci Monsieur Efficace !
Je vais voir si tu abordes le retour de variables après le drop…
+++
décembre 7th, 2011 at 22 h 13 min
Attention : les deux fonction javascript s’appellent « cache » dans les exemples ci-dessus. Il y en a une des deux qui doit s’appeler « affiche » plutot