[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)
Posté par Guiral antoine le février 24, 2008
Ce tutoriel est disponible sur mon nouveau blog : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/
Bonjour!
Je profite d’un peu de répit ce dimanche pour terminer la première partie de ce tutoriel. Nous allons voir comment faire des drag’n drop (glisser déposer) avec JQuery. Dans un second temps nous verrons comment sauvegarder les modifications directement en base de donnée avec de l’ajax. Pour voir un exemple je vous propose d’aller faire un tour sur mon site de gestion d’une équipe de rugby (projet en cour) : teamManagerXV.
Bon allez on attaque?!
- Le coté client : XHTML
Comme d’habitude le code puis les explications 
<html>
<head>
<title>Tuto drag’n drop</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”interface.js”></script>
<script type=”text/javascript” src=”script.js”></script>
<link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”/>
</head>
<body>
<div>
<h1>Waouuuuuuuhhhhhh</h1>
<div class=”ingredient”>
<div id=”1″ class=”drag”>sucre</div>
<div id=”2″ class=”drag”>lait</div>
<div id=”3″ class=”drag”>farine</div>
<div id=”4″ class=”drag”>oeuf</div>
<div id=”5″ class=”drag”>sel</div>
</div>
<div class=”recette” id=”r_1″>
<h3>Pâte à crêpe</h3>
<div class=”recette_ingredient”>
</div>
</div>
<div class=”recette” id=”r_2″>
<h3>Pâte brisée</h3>
<div class=”recette_ingredient”>
</div>
</div>
</div>
</body>
</html>
Alors rien de particulier pour le moment en terme de structure du document. Vous pouvez remarquer que nous avons 3 divs “principaux” : un pour les ingrédients et un pour chaque recette. Celui pour les ingrédients contient nos éléments draggables tandis que ceux pour les recettes contiennent nos récepteurs (zone de drop).
- un peu de style : CSS
div{border:1px solid black}
.drag,.recette_ingredient{height:20px;width:60px}
Pas grand chose ici! Juste des bordures pour que ce soit “compréhensible” et un largeur/hauteur définie pour les zones de drop et les drags.
- Enfin des trucs cool! Le javascript!
Afin de ne pas concurrencer mon nouveau blog, je suis obliger de tronquer l’article. Pour un meilleur confort je vous conseil de lire la suite ici : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/
bruno bichet a dit
Cool ce tuto sur jquery, exactement ce qui me manquait pour me mettre à l’ajax (vivemenent la deuxième partie, donc)
Guiral antoine a dit
je suis en train de la rediger :p je twit dès que j’ai fini!
Edit : Ayééé il est en ligne —>> http://antoine.guiral.info/2008/03/09/tuto-jquery-drag-%e2%80%98n-drop-avec-sauvegarde-automatique-en-base-de-donnees-22/
Hoax rss a dit
juste un petit mot pour te duire que tu gagnerais à être rceonnu par tous
Guiral antoine a dit
Merci hoax Rss!
J’essaye de me faire connaitre mais je t’assure que ce n’est pas facile
donc toute aides est la bienvenue! N’hésite pas à revenir et à en parler autour de toi 
A bentôt!!
Alain a dit
Merci pour ce script !
J’ai voulu l’adapter mais ça bug sous IE6 et 7 ! Sur ton site teamManagerXV il est possible d’incrémenter les équipes mais impossible de sortir les joueurs ensuite (seuls les noms présents par défaut les peuvent). De plus, une fois sortis les noms par défaut il est impossible de dragger à nouveau les noms vers les équipes. Dommage car sous Firework ça roule super !
Enfin, d’un point de vue esthétique il aurait été agréable d’avoir dès la sélection le curseur de déplacement.
Que de critiques je sais, c’est facile, mais c’est important je pense.
Bravo tout de même
Guiral antoine a dit
Bonjour Alain,
en effet sous IE (7 en tout cas dc surement sur le 6
) teamManager ne marche pas. Cependant le javascript de teamManager n’est pas celui du tuto…Je peux peut être essayer de le corriger pendant le week end mais je suis un peu débordé :s
En ce qui concerne le curseur, si tu regarde dans la méthode droppable j’ai mis un commentaire qui parle des classes CSS au survol du drag. La solution est là
.
En tout cas je vas essayer de corriger le drag’n drop sur IE…
Merci et à bientôt!
Alain a dit
J’imagine que tout cela prend du temps !
En fait je suis plutôt webdesigner, je bidouille les scripts pour réaliser au plus près l’ergonomie que je souhaite.
.
J’ai fait une longue recherche et ton script correspond le mieux à ce que je recherchais. Je n’ai pas réussi à faire fonctionner celui du tuto alors je me suis permis de récupérer le code de ton site qui a le grand avantage d’être en action
Je suis en train de le fusionner avec un autre afin de pouvoir dragger aussi les boites de réception. Si cela t’interesse je pourrais te communiquer le lien du résultat.
Bon week-end
Guiral antoine a dit
Si cela t’interesse je peux t’envoyer les sources du tuto (le script étant “mieux”). Pour le lien du résultat je me ferais un plaisir de te faire un backlink.
Merci bon week end a toi aussi.
Alain a dit
Avec joie ! Tu peux utiliser l’adresse que j’ai inscrite pour laisser des commentaires.
Je te tiendrai au courant de mes avancées.
A bientôt
Alain a dit
Hello Antoine
J’espère que ton weekend fut bon malgré que tu sois débordé actuellement. Par quel biais pensais-tu me faire parvenir les sources du tuto ? Je suis impatient de le tester car tu dis qu’il est mieux que celui que je trouve déjà très bien.
Merci par avance
Alain
Pariaud a dit
Bonjour,
J’ai besoin d aide je débute en javascript, j’ai lu ton tuto,
pourrai tu m’envoyer les scripts du tuto, j’aimerai mieu comprendre,
merci d’avance
Guiral antoine a dit
salut pariaud, je ne suis pas sur que te donner les script tels quels t’aiderais beaucoup si tu débutes en JS…Par contre je veux bien répondre à tes questions
Création site internet a dit
Merci pour ce script