UI sortable - fonction STOP [Résolu]

[tryptan]

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 :

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 :

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

[danielhagnoul]

Bonsoir

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

[tryptan]

oui mais mon problème est que je n'arrive même pas à faire une simple alert !

Code :

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

[danielhagnoul]

Code :

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();

[tryptan]

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

[tryptan]

J'ai fais cela :

Code :

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

[tryptan]

J'ai réussi à faire ce que je voulais.
J'annule des déplacements selon :

si l'élément fils se retrouve déplacé à droite sans élément père
et on ne peut pas déplacer tout un groupe ( élément père et tout ses fils) si on déplace ce groupe dans un autre élément père.

Le name quest est appliqué aux élément fils et le name mod est appliqué aux élément pères.

Code :

1
2
3
4
5
6
7
8
9
10
stop: function(event, ui) {
 
 
				if((ui.item.parent("ul").attr('id') == '') && (ui.item.attr('name') == 'quest')){
				$(this).sortable('cancel');}
 
 
				if((ui.item.attr('name') == 'mod') && (ui.item.parent("ul").attr('id') != '')) {
				$(this).sortable('cancel');}
				}

Merci bien pour l'aide