IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

UI Draggable et Droppable, comment utiliser la fonction clone() ?


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Avril 2010
    Messages
    42
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 42
    Par défaut UI Draggable et Droppable, comment utiliser la fonction clone() ?
    Bonjour la communauté,

    J'utilise Jquery (version 1.3.2) couplé à ui.draggable et ui.droppable (en version 1.7.2).

    Le principe est simple, j'ai à gauche une zone "d'outils" qui sont "draggable" et à droite une zone ou j'insère mes outils (qui est donc "droppable").

    Je les déplace sans soucis, enregistre leur positions... Etc, etc.
    Mais le problème c'est qu'un fois placé, le div n'est plus dans la zone d'outil.

    L'idéal : Un clone est créé dans la zone droppable (tout en restant draggable).

    J'utilise :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    helper:'clone' => dans la fonction $(".objet").draggable
    $(this).append(ui.draggable.clone());
    Mais celà ne fonctionne pas du tout (le clone est crée à gauche, à droite il n'a pas gardé le style... Etc.)

    Merci de votre aide.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Voir la documentation : http://jqueryui.com/demos/draggable/#sortable
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    $("#draggable").draggable({
    	helper: 'clone',
    	revert: 'invalid'
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Inscrit en
    Avril 2010
    Messages
    42
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 42
    Par défaut
    Bonjour,

    Navré pour le titre et la balise code, et merci de votre réponse.

    Évidemment, j'avais déjà bien fouillé la doc.
    Je suis reparti d'un test simple, deux div un qui drag l'autre qui drop, et on clone.

    Je pense que je raisonnais à l'envers... Voici la solution pour ceux qui vont se prendre la tête avec ça ^^.

    Les éléments que l'on souhaite bouger :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    $(".draggable").draggable({
    	helper: 'clone',
    	revert: 'invalid',
    });
    L'élément qui reçoit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    $("#droppable").droppable({
    	drop : function(event, ui){
    	$(this).append(ui.helper.clone().removeClass("ui-draggable-dragging").draggable({helper:'original'}));
    }
    });
    J'ai par contre ajouter une autre classe, et je teste si elle existe avant de cloner.
    Si elle existe je clone et je la supprime (c'est pour éviter qu'il se clone à l'infini quand on redéplace l'objet).

  4. #4
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2010
    Messages : 2
    Par défaut
    Citation Envoyé par scfi1 Voir le message

    J'ai par contre ajouter une autre classe, et je teste si elle existe avant de cloner.
    Si elle existe je clone et je la supprime (c'est pour éviter qu'il se clone à l'infini quand on redéplace l'objet).
    Bonjour,

    peut-tu développer et peut-être poster ton code ?
    J'ai ce problème de clonage à l'infini...

    Merci.

  5. #5
    Membre averti
    Inscrit en
    Avril 2010
    Messages
    42
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 42
    Par défaut
    Bonjour,

    Concrètement, mes objet que je peux "drag" ont une classe.
    Une fois que je les ai déjà drag, c'est une autre classe qui remplace.

    Je teste donc si cette classe existe avant de cloner. Si elle existe, alors je clone, sinon je déplace simplement l'objet (je ne clone pas).

    Exemple :
    Dans ton objet "droppable".

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    regex = new RegExp("\\bnom_classe\\b");
    Tu initialises une regex avec le nom de ta classe.

    Ensuite tu testes si la classe existe et exécute plusieurs actions à la chaine :
    • Suppression de classe
    • Ajout de classe
    • Clonage


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    if(regex.test(ui.helper.attr('class'))){
    	$(this).append(ui.helper.clone().removeClass("ui-draggable-dragging").removeClass("nom_classe").addClass('nouveau_nom_classe').draggable({helper:'original'}));
    				}
    J'espère que celà t'aidera.

  6. #6
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2010
    Messages : 2
    Par défaut
    Merci pour ta réponse mais j'ai pas tout compris
    Si j'ai une
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="draggable">
    le "draggable" je le met où ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. comment utiliser les fonctions d'une dll
    Par sebled dans le forum MFC
    Réponses: 3
    Dernier message: 24/02/2006, 16h59
  2. [Excel] Comment utiliser la fonction RECHERCHEV
    Par forsay1 dans le forum Macros et VBA Excel
    Réponses: 17
    Dernier message: 03/02/2006, 11h43
  3. Réponses: 3
    Dernier message: 31/12/2005, 23h09
  4. Comment utiliser la fonction NBR.JOURS.OUVRES?
    Par MEHCOOPER dans le forum Access
    Réponses: 9
    Dernier message: 20/10/2005, 12h50
  5. Réponses: 11
    Dernier message: 22/12/2003, 21h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo