[scriptaculous]Problème Drag n Drop

Problème Drag n Drop [scriptaculous] - HTML/CSS - Programmation

Marsh Posté le 19-11-2008 à 10:21:14    

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

Message cité 1 fois
Reply

Marsh Posté le 19-11-2008 à 10:21:14   

Reply

Marsh Posté le 19-11-2008 à 11:57:38    

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
Reply

Marsh Posté le 20-11-2008 à 20:05:39    

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...

Reply

Marsh Posté le 21-11-2008 à 14:48:01    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed