Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2620 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [scriptaculous]Problème Drag n Drop

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[scriptaculous]Problème Drag n Drop

n°1813707
ethan94
Posté le 19-11-2008 à 10:21:14  profilanswer
 

J'essaie de réaliser un petit exercice en javascript qui consiste à déplacer une image dans 4 cases, au choix (et optionnellement, de garder la position de l'image même après rechargement de la page).
Pour cela, j'ai choisi le framework scriptaculous qui semble être assez efficace sourire.gif
 
J'ai lu la documentation sur le wiki du site officiel mais malgré celà, j'ai quelques problèmes.
Pour commencer, quel que soit le nombre de cases que je crée, lorsque je glisse l'image dans la première, elle se fige et je ne peux plus la déplacer, alors que pour les autres, ça fonctionne normalement.
 
Ensuite, j'aimerais utiliser l'option {revert: "failure"} qui est censée faire revenir l'image à son point de départ si je ne la lâche pas dans une zone droppable or elle ne semble pas être reconnue dans mon code. Si je l'utilise, je n'ai plus la possibilité de déplacer mon image où que ce soit :/
 
Si quelqu'un a déjà utilisé ce framework et aurait une solution, je le remercie par avance  :)  
 
ma page test: http://pixlmylife.e3b.org/javascript/index2.html

mood
Publicité
Posté le 19-11-2008 à 10:21:14  profilanswer
 

n°1813770
Alisteroid
Posté le 19-11-2008 à 11:57:38  profilanswer
 

ethan94 a écrit :

J'essaie de réaliser un petit exercice en javascript qui consiste à déplacer une image dans 4 cases, au choix (et optionnellement, de garder la position de l'image même après rechargement de la page).
Pour cela, j'ai choisi le framework scriptaculous qui semble être assez efficace sourire.gif

 

J'ai lu la documentation sur le wiki du site officiel mais malgré celà, j'ai quelques problèmes.
Pour commencer, quel que soit le nombre de cases que je crée, lorsque je glisse l'image dans la première, elle se fige et je ne peux plus la déplacer, alors que pour les autres, ça fonctionne normalement.

 

Ensuite, j'aimerais utiliser l'option {revert: "failure"} qui est censée faire revenir l'image à son point de départ si je ne la lâche pas dans une zone droppable or elle ne semble pas être reconnue dans mon code. Si je l'utilise, je n'ai plus la possibilité de déplacer mon image où que ce soit :/

 

Si quelqu'un a déjà utilisé ce framework et aurait une solution, je le remercie par avance  :)

 

ma page test: http://pixlmylife.e3b.org/javascript/index2.html

 

Perso je fais du drag & drop d'éléments entre 2 zones :

 
Code :
  1. function valideGif(value, draggable, dropable)
  2. {
  3.     var url = baseurl+'gifs/update/?format=json';
  4.     var result = new Ajax.Request(    url,
  5.                     {
  6.                         method:'get' ,
  7.                         parameters:{ 'id':draggable.id , 'valid':value },
  8.                         onSuccess: function(response)
  9.                             {
  10.                                 var responseObject = eval('(' + response.responseText + ')');
  11.                                 message(    responseObject.message);
  12.                             }                                               
  13.                     }
  14.     );
  15. }
  16.  
  17. function makedragablegifs()
  18. {
  19.   makedragdropgif('images', 'imagesnonvalides'); // Config de drag&drop de la premiere à la deuxieme zone
  20.   makedragdropgif('imagesnonvalides', 'images');//Config de drag&drop de la deuxieme à la premiere zone
  21. }
  22.  
  23. function makedragdropgif(id_dropable, id_dragable )
  24. {
  25. //Pour tous les elements se trouvant dans la zone dragable
  26.     $A($(id_dragable).getElementsByTagName('div')).each(
  27.      function(item) {
  28.         new Draggable(
  29.            item,
  30.            {
  31.               revert: true,
  32.               ghosting: true
  33.            }
  34.         );
  35.      }
  36.   );  
  37.  
  38.   Droppables.add(
  39.     id_dropable,
  40.     {
  41.        hoverclass: 'hoverActive',
  42.        onDrop: movegif
  43.     }
  44.  );
  45.   // Set drop area by default  non cleared.
  46.   $(id_dropable).cleared = false;
  47. }
  48.  
  49. //Fonction appellee au drop -> on enregistre en base dans quelle zone est placée l'element
  50. function movegif(draggable,droparea){
  51.     if(droparea.id == 'imagesnonvalides')
  52.     {
  53.         result2 = 0;
  54.     }
  55.     else
  56.     {
  57.         result2 = 1;
  58.     }
  59.     valideGif(result2,draggable, droparea);
  60.     draggable.parentNode.removeChild(draggable);
  61.     droparea.appendChild(draggable);
  62. }
  63. Event.observe(window, 'load', makedragablegifs, false);


A toi d'adapter cela à 3 zones voir plus, le mieux est de créer un script js indépendant du nb de zones en fournissant juste un tableau contenant les id des zones à ton script , ça demande un peu de réflexion mais c'est pas difficile...


Message édité par Alisteroid le 19-11-2008 à 12:01:05
n°1814665
ethan94
Posté le 20-11-2008 à 20:05:39  profilanswer
 

Bonsoir et merci pour votre aide :)
 
Je ne suis pas spécialiste du javascript. Est ce qu'il y n'y aurait pas une méthode plus simple? Parce que j'ai beau essayer, je n'arrive pas à comprendre tout ce code...

n°1814993
Alisteroid
Posté le 21-11-2008 à 14:48:01  profilanswer
 

Ba c'est pas vraiment difficile, essaye de bien parcourir le script dans l'ordre :

 

Fonction appellée au chargement de la page

Code :
  1. Event.observe(window, 'load', makedragablegifs, false);


J'ai 2 zones : images et images_valides, lesquelles contiennent des images (encapsuler dans des div) à valider/dévalider

Code :
  1. function makedragablegifs()
  2. {
  3.  makedragdropgif('images', 'imagesnonvalides'); // Config de drag&drop de la premiere à la deuxieme zone
  4.  makedragdropgif('imagesnonvalides', 'images');//Config de drag&drop de la deuxieme à la premiere zone
  5. }
 

Cette fonction est appellée pour bouger une image de la zone "image" à la zone "image_valide" ou l'inverse, c'est pour ça que je l'appelle deux foix au dessus

Code :
  1. function makedragdropgif(id_dropable, id_dragable )
  2. {
  3.      //Pour toutes image se trouvant dans la zone dragable, je la confirgure pour pouvoir le drag&droper
  4.     $A($(id_dragable).getElementsByTagName('div')).each(
  5.      function(item) {
  6.         new Draggable(
  7.            item,
  8.            {
  9.               // Si l'image a pas été lachée dans une zone "dropable" elle revient à sa position initiale
  10.               revert: true,
  11.               ghosting: true // l'image est transparente lorsque je la déplace
  12.            }
  13.         );
  14.      }
  15.   );  
  16.  
  17.   //La je configure le fait de pouvoir la dropper dans l'autre zone
  18.   Droppables.add(
  19.     id_dropable, //id de la zone ou je vais dropper
  20.     {
  21.        hoverclass: 'hoverActive',
  22.        onDrop: movegif // Fonction appellée lorsque mon image a été droppée dans la zone
  23.     }
  24.  );
  25.   //Vider ou pas la zone au chargement de la page (pour moi non , elle peut contenir des images ...)
  26.   $(id_dropable).cleared = false;
  27. }
 


Code :
  1. //Fonction appellee au drop -> on enregistre en base dans quelle zone est placée l'element
  2. function movegif(draggable,droparea){
  3.        //je vérifie dans quelle zone l'image a été droppée
  4.     if(droparea.id == 'imagesnonvalides')
  5.     {
  6.         result2 = 0;
  7.     }
  8.     else
  9.     {
  10.         result2 = 1;
  11.     }
  12.        //J'enregistre en base
  13.     valideGif(result2,draggable, droparea);
  14.        //J'enleve l'image de la zone ou je l'ai draggé
  15.     draggable.parentNode.removeChild(draggable);
  16.        //Je la rajoute à la zone droppée
  17.     droparea.appendChild(draggable);
  18. }
 

Fonction enregistrant la zone dans laquelle doit se situer l'image

Code :
  1. function valideGif(value, draggable, dropable)
  2. {
  3.     var url = baseurl+'gifs/update/?format=json';
  4.     var result = new Ajax.Request(    url,
  5.                     {
  6.                         method:'get' ,
  7.                         parameters:{ 'id':draggable.id , 'valid':value },
  8.                         onSuccess: function(response)
  9.                             {
  10.                                 var responseObject = eval('(' + response.responseText + ')');
  11.                                 message(    responseObject.message);
  12.                             }                                               
  13.                     }
  14.     );
  15. }


Message édité par Alisteroid le 21-11-2008 à 14:56:51

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [scriptaculous]Problème Drag n Drop

 

Sujets relatifs
Problème : Envoi de mailProblème avec LoadVars!!!
probleme avec la commande makeprobleme lazy loading
Problème courant du tableau 2D[resolu]préremplir une case de FORMulaire : probleme avec guillemets
Problème IE6, et oui, encore 15% des internautes !!probleme de css avec input
probleme css dans fichier .php[Batch] xcopy et le changement d'heure, problème "à la con" !
Plus de sujets relatifs à : [scriptaculous]Problème Drag n Drop


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR