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 sortable - fonction STOP


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 17
    Par défaut UI sortable - fonction STOP
    Bonjour,

    J'utilise UI sortable pour un système de drag and drop assez complexe.
    Je voudrais simplement implémenter une fonction STOP, c'est à dire appeler cette fonction après qu'un élément ait été déplacé.

    Ici, j'arrive à afficher le parent de l'élément que je bouge. Si cet élément est égale à rien du tout ( donc si l'élément déplacé se retrouve sans parent), je voudrais annuler le déplacement.
    Donc pour le moment dans la console,j'arrive à afficher le parent de l'élément déplacé grâce à ui.item.parent("ul").attr('id'))

    Je voudrais donc faire un test et si ce élément est vide, on annule le déplacement, limite meme faire une alert. Si je met un if dans la fonction stop: plus rien ne fonctionne.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $('#example-1-3 .sortable-list').sortable({
    		connectWith: '#example-1-3 .sortable-list',
    		placeholder: 'placeholder',
    		start: function(event, ui) {
    					// le texte de l'élément déplacé
    					console.log("start : ui.item.text() = " + ui.item.text());
     
    					// la position initiale de l'élément déplacé + 1 pour obtenir de 1 à n
    					console.log('start : $(this).children("li").index(ui.item) = ', $(this).children("li").index(ui.item) + 1);
    				},
    				stop: function(event, ui) {
    					// le texte de l'élément déplacé
    					console.log("stop : ui.item.text() = " + ui.item.text());
     
    					// la position finale de l'élément déplacé + 1 pour obtenir de 1 à n
    					console.log('stop : $(this).children("li").index(ui.item) = ', ui.item.parent("ul").attr('id'));
    				}
     
     
    	});
    Du coup, j'ai essayé ce que je trouve un peu partout sur le net genre :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    	$( ".#example-1-3 .sortable-list" ).bind( "dragstop", function(event, ui) {
     alert("i");
    });
    pour avoir une alert dès que le mouvement est effectif. Le seule truc que j'arrive à faire, c'est de faire apparaitre le parent dans la console. J'arrive à rien sans la console.
    Je voudrais bien un coup de pouce avt de me noyer dans les toilettes :p:p
    mercii

  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

    Je suggère de tester la méthode cancel : http://jqueryui.com/demos/sortable/#method-cancel

    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
    Décembre 2011
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 17
    Par défaut
    oui mais mon problème est que je n'arrive même pas à faire une simple alert !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    stop: function(event, ui) {
    					// le texte de l'élément déplacé
    					console.log("stop : ui.item.text() = " + ui.item.text());
     
    					// la position finale de l'élément déplacé + 1 pour obtenir de 1 à n
    					console.log('stop : $(this).children("li").index(ui.item) = ', ui.item.parent("ul").attr('id'));
    // si parent vide alert
    if  (ui.item.parent("ul").attr('id') == '')
    alert("mal placé");
    				}
    Je dois mal m'y prendre. Cette condition et cette alert bloque même le processus de drop and drag Une fois que j'arriverai a interagir avec cette condition, je retesterai la méthode ( jai deja essayé en vain).
    merci

  4. #4
    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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $( "#sortable" ).sortable({
    	change: function(event, ui){
    		console.log( $(ui.item).text() );
     
    		// attention dans change cela donne la position de départ dans la liste
    		// exemple le li "Item 1" qui était en position 4
    		console.log( $("li", this).index(ui.item) );
     
    		// $(ui.item).parent("ul") c'est $(this)
     
    		// annule le dernier changement
    		// $(this).sortable('cancel');
     
    		// If the sortable item is being moved from one
    		// connected sortable to another:
    		// $(ui.sender).sortable('cancel');
    	}
    }).disableSelection();

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

  5. #5
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 17
    Par défaut
    Ok merci bien
    mais comment intégrer ce ":change" avec ma condition if (ui.item.parent("ul").attr('id') == '') qui est placé dans le stop??
    Cette fonction change devrait donc se lancer seulement quand la condition est vérifié dans le "stop". Je veux annuler le déplacement seulement si la condition est respectée donc seulement si quand on dépose un item à un endroit où il va se retrouver sans parent

  6. #6
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 17
    Par défaut
    J'ai fais cela :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $('#example-1-3 .sortable-list').sortable({
    		connectWith: '#example-1-3 .sortable-list',
    		placeholder: 'placeholder',
    		start: function(event, ui) {
    					// le texte de l'élément déplacé
    					console.log("start : ui.item.text() = " + ui.item.text());
     
    					// la position initiale de l'élément déplacé + 1 pour obtenir de 1 à n
    					console.log('start : $(this).children("li").index(ui.item) = ', $(this).children("li").index(ui.item) + 1);
    				},
    				stop: function(event, ui) {
    					// le texte de l'élément déplacé
    					console.log("stop : ui.item.text() = " + ui.item.text());
     
    					// la position finale de l'élément déplacé + 1 pour obtenir de 1 à n
    					console.log('stop : $(this).children("li").index(ui.item) = ', ui.item.parent("ul").attr('id'));
    				},
    				change: function(event, ui){
    				if(ui.item.parent("ul").attr('id') == ''){
    				$(this).sortable('cancel');
    				 $(ui.sender).sortable('cancel');}
    				}
     
    	});
    J'ai deux problème, le premier est que cancel me bloque l'élément en déplacement en plein vol et fige tout les éléments déplaçable.
    Le deuxième est que ma condition n'est pas bonne.

    Ce que je voudrais au final : un élément fils est contenu dans un élément père dans une colonne de gauche, si on déplace un élément fils dans la colonne de droite,et si on le fait glisser dans un nouvel élément père cela se passe bien. Par contre , si on fait glisser cet élément fils et qu'il se retrouve dans la colonne de droite SANS élément père, on doit annuler le mouvement.

    Ma condition actuelle me permet de savoir si l'élément déplacable à un élément père à la base , or je voudrais savoir si à l'endroit où on l'a déplace il se retrouve avec un élément père :p

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

Discussions similaires

  1. [Débutant] Problème en fonction 'stop'
    Par syrine01 dans le forum Interfaces Graphiques
    Réponses: 3
    Dernier message: 23/02/2015, 23h57
  2. [8] Utilisation de la fonction stop
    Par lololebricoleur dans le forum Flash
    Réponses: 1
    Dernier message: 26/09/2014, 16h47
  3. utilisation des fonctions play et stop
    Par Balthazar117 dans le forum ActionScript 3
    Réponses: 2
    Dernier message: 24/06/2009, 14h24

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