[scriptaculous]Problème Drag n Drop

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [scriptaculous]Problème Drag n Drop

ethan94

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

Publicité

Alisteroid

ethan94 a écrit :

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 :

function valideGif(value, draggable, dropable)
{
    var url = baseurl+'gifs/update/?format=json';
    var result = new Ajax.Request(    url, 
                    { 
                        method:'get' ,
                        parameters:{ 'id':draggable.id , 'valid':value },
                        onSuccess: function(response)
                            {
                                var responseObject = eval('(' + response.responseText + ')');
                                message(    responseObject.message);
                            }                                               
                    }
    );
}
 
function makedragablegifs() 
{
   makedragdropgif('images', 'imagesnonvalides'); // Config de drag&drop de la premiere à la deuxieme zone
   makedragdropgif('imagesnonvalides', 'images');//Config de drag&drop de la deuxieme à la premiere zone
}
 
function makedragdropgif(id_dropable, id_dragable )
{
//Pour tous les elements se trouvant dans la zone dragable
    $A($(id_dragable).getElementsByTagName('div')).each(
      function(item) {
         new Draggable(
            item,
            {
               revert: true,
               ghosting: true
            }
         );
      }
   );   
 
   Droppables.add(
     id_dropable,
     {
        hoverclass: 'hoverActive',
        onDrop: movegif
     }
  );
   // Set drop area by default  non cleared.
   $(id_dropable).cleared = false;
}
 
//Fonction appellee au drop -> on enregistre en base dans quelle zone est placée l'element
function movegif(draggable,droparea){
    if(droparea.id == 'imagesnonvalides')
    {
        result2 = 0;
    }
    else
    {
        result2 = 1;
    }
    valideGif(result2,draggable, droparea);
    draggable.parentNode.removeChild(draggable);
    droparea.appendChild(draggable);
}
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

ethan94

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

Alisteroid

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

Fonction appellée au chargement de la page

Code :

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 :

function makedragablegifs()
{
  makedragdropgif('images', 'imagesnonvalides'); // Config de drag&drop de la premiere à la deuxieme zone
  makedragdropgif('imagesnonvalides', 'images');//Config de drag&drop de la deuxieme à la premiere zone
}

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 :

function makedragdropgif(id_dropable, id_dragable )
{
      //Pour toutes image se trouvant dans la zone dragable, je la confirgure pour pouvoir le drag&droper
    $A($(id_dragable).getElementsByTagName('div')).each(
      function(item) {
         new Draggable(
            item,
            {
               // Si l'image a pas été lachée dans une zone "dropable" elle revient à sa position initiale
               revert: true, 
               ghosting: true // l'image est transparente lorsque je la déplace
            }
         );
      }
   );   
 
   //La je configure le fait de pouvoir la dropper dans l'autre zone
   Droppables.add(
     id_dropable, //id de la zone ou je vais dropper
     {
        hoverclass: 'hoverActive',
        onDrop: movegif // Fonction appellée lorsque mon image a été droppée dans la zone
     }
  );
   //Vider ou pas la zone au chargement de la page (pour moi non , elle peut contenir des images ...)
   $(id_dropable).cleared = false; 
}

Code :

//Fonction appellee au drop -> on enregistre en base dans quelle zone est placée l'element
function movegif(draggable,droparea){
        //je vérifie dans quelle zone l'image a été droppée
    if(droparea.id == 'imagesnonvalides')
    {
        result2 = 0;
    }
    else
    {
        result2 = 1;
    }
        //J'enregistre en base
    valideGif(result2,draggable, droparea);
        //J'enleve l'image de la zone ou je l'ai draggé
    draggable.parentNode.removeChild(draggable);
        //Je la rajoute à la zone droppée
    droparea.appendChild(draggable);
}

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

Code :

function valideGif(value, draggable, dropable)
{
    var url = baseurl+'gifs/update/?format=json';
    var result = new Ajax.Request(    url, 
                    { 
                        method:'get' ,
                        parameters:{ 'id':draggable.id , 'valid':value },
                        onSuccess: function(response)
                            {
                                var responseObject = eval('(' + response.responseText + ')');
                                message(    responseObject.message);
                            }                                               
                    }
    );
}

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

FORUM HardWare.fr

Programmation

HTML/CSS

[scriptaculous]Problème Drag n Drop

Sujets relatifs
Problème : Envoi de mail	Problème avec LoadVars!!!
probleme avec la commande make	probleme 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

Page générée en 0.048 secondes