Discussion :

[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 :

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

[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 :

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

[danielhagnoul]

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

[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 :

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