UI Sortable. Déplacer un élément en sauvegardant sa position initiale

Version imprimable

Bonjour,

j'ai actuellement une fonction qui me permet d'afficher des listes chacune de ces listes à des éléments et des sous éléments je me sert de liste à puce , chaque élément sont des infos venant de ma base de données , à l'aide d'une fonction récursive j'obtiens quelques chose de ce genre:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <ul> <li>n°1 : Data </li> <ul> <li>n°1-1 : Data </li> <li>n°1-2 : Data </li> <li>n°1-3 : Data </li> <ul> <li>n°1-3-1 : Data </li> </ul> </ul> <ul> <li>n°2 : Data 1</li> </ul> <ul> <li>n°3: Data 1</li> </ul>
Chaque liste ul peut contenir d'autres liste à l'infini. A l'aide de jquery UI , je peux déplacer chaque élément <li>, pour pouvoir placer une ligne "DATA" ou je veux, cependant j'ai besoin de récupérer en javascript l'élément selon sa position du DOM ainsi qu'une valeur d'un élément à l'intérieur qui contiendrait l'identifiant dans la base de donnée de DATA.

En résumé comment faire pour déplacer une ligne DATA avec "SORTABLE" de JQUERY UI, en sachant ou l'objet a était positionné.

Petite info supplémentaire j'utilise Zend Framework et Zend studio.

J'aimerais dans un premier temps des directives , des library ou des fonctions qui m'aiderait je ferais mes propres recherches , avant de vous donner mon code.

J'ai oublié de rajouter un petit screen : http://img34.imageshack.us/img34/2756/screnwr.jpg

Merci d'avance pour vos réponses.

24/04/2011, 09h20
SpaceFrog

append ailleurs ... l'élément se déplace

Re,

je suis toujours bloquer ^^ j'essaye d'envoyer un serialize dans l'option update de sortable seulement je ne reçoit rien sur l'autre page.

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
25
26
27
28
29
30
31
32
33
$("ul").sortable({
				opacity:0.6,				
				axis:'vertically',			
				connectWith: ".connectedSortable",
				placeholder: "ui-state-highlight",
				update:
					 function(){clearEmptyUl();}
 
					 function(sorted){
 
						  appel();
						  //$.SortSerialize ( 'sortlist' ); 
 
						  serial = $(this).sortable('serialize');
						 // alert($(this).sortable('serialize'));
			 			alert(serial);
						$.ajax ({
			              url : "url/page.php",
			              type : "POST",
			              data : serial
 
			              // Si vous avez besoin d'un feedback de la requête vous
			              // pouvez utiliser ces fonctions ci dessous.
 
			             // complete: function(data){alert(data);},
			             // success: function(feedback){ $('#data').html(feedback); }
			          //    error: function(){alert('Erreur lors du déplacement ');}
 
			       });	
				} 
			});
			$("ul").disableSelection();
		});

Voici le code, si on pouvait me guider. je souhaite récupérer la position de mon div par rapport au parent dans lequel il vient d'être mis pour faire la modification dans la base de donnée.
L'id de chaque formulaire est de type 'id_nombre' , mais je voulais plutôt id_nombre_parent , pour pouvoir après à chaque déplacement rafraichir son numéro d'ordre avec une fonction javascript.

Bonsoir

En utilisant les événements start et stop, exemple :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
	<style>
		/* Base */
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:3px; padding-top:3px; }
        li {padding-bottom:3px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
		#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
		#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
		#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<ul id="sortable">
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
		</ul>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		2011-04-25 <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<script>
		$(function(){
			$("#sortable").sortable({
				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) = ', $(this).children("li").index(ui.item) + 1);
				}
			}).disableSelection();
		});
	</script>
</body>  
</html>

Bonjour ,

Tout d'abord merci à danielhagnoul , je me suis servie de start and stop et j'obtiens l'id de la question que je glisse et de la question père ou je la dépose (si elle est déposé à la racine j'obtiens undefined) , j'ai donc du adapté ton script pour mes liste/souslistes à l'infini .

Avec ce que j'ai je devrais pouvoir modifier la base de donnée à chaque déplacement pour une question donné et lui attribué son nouveau parent.

Cependant premier problème, une question peut avoir plusieurs fils et donc ceux-ci doivent se déplacer avec la question séléctionner , mais une question d'ergonomie et de simplicité on ne fait pas un sortable d'un gros bloc de question on va simplement supprimer les questions fils , du moins visuellement , pour les faire apparaitre lors de l'événement stop. C'est là que j'ai un soucis , dans l'événement start je récupère les questions filles dans une variable mais comment l'envoyer à mon événement stop ?

Parallèlement à ce problème , et chose que je n'ai pas mentionné dans ma question de départ, lorsque je déplace une question , elle peut être fils de n'importe quel question, c'est à dire si j'ai :

<ul>
<li> </li>
<li> </li>
</ul>

je peux mettre des questions dans cette liste mais il resteront d'ordre 1 (du même niveau) , mais il faut permettre de mettre une question un un des <li>, mais avec sortable de jquery de base cela ne peut marcher il faut qu'il y'est un <ul> après un </li> d'id sortable et avec l'option connectWith pour que chaque liste puisse s'échanger des éléments :
Toujours via start et stop , je crée à l'événement start des <ul> après chaque <li> qui n'en contient pas de manière à permettre la possibilité de mettre des fils à chaques question , et lorsque le stop est déclencher on supprime tout les <ul> ajouter (par définition vide !)

Cependant la question séléectionner peut elle aussi avoir un <ul> de crée ce que fait si lache l'élément dans ce <ul> on obtiens un fils de la question qu'on était en train de séléctionner , donc un fils sans parents (visuellement un décalage avec rien audessus)

Voilà pour l'explication , voici le code , il ya 2 fois l'événement start et stop pour bien différencier les 2 problèmes rencontrer :
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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 $("ul").sortable({ opacity:0.6, axis:'vertically', connectWith: ".connectedSortable", placeholder: "ui-state-highlight", cursor: 'crosshair', zIndex: 0, delay:200, revert: true, /** Ici on traite la possibilité de mettre une question en tant que fils à n'importe quel question ! **/ /** !! Probleme comment éviter de crée un <ul .... ><li> pour l'élément qu'on est en train de drag **/ start: function(event,ui) { $(this).find('li').next().not('ul').after('<ul id="sortable" class="connectedSortable"><li class="hiddenli" style="height:0.1em;"></li></ul>'); $(this).find(ui.item).next().find('li:empty').remove(); $(this).sortable('refresh'); }, stop: function(event,ui) { $(this).find('li:empty').remove(); $(this).find('ul:empty').remove(); $(this).sortable('refresh'); } /** Ici on traite le déplacement, pour traiter la base de données correctement via un $post plus tard ! **/ start: function(event, ui) { // l'id de la question console.log("start : ui.item.span() = " + ui.item.attr('id')); var id = ui.item.attr('id'); $(ui.item).next().next('ul').hide('slide', { direction: "up" } , 'slow', function(){ var test = $(ui.item).next().next('ul'); /** Comment envoyer cette variable a stop pour reafficher toutes les questions après le drop ?? **/ //console.log('test : ', $(ui.item).next().next('ul') ); /* * On supprimme les questions fils * $(ui.item).next().next('ul').empty();*/ }); // 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){ //l'id pere ou la question est posé console.log('stop previous element : $(this)= ', $(ui.item).prev().attr('id')); console.log('stop next element : $(this)= ', $(ui.item).next().attr('id')); console.log("stop : ui.item.text() = " + ui.item.parent().prev().attr('id')); //console.log("stop : ui.sender() = " + ui.sender.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) = ', $(this).children("li").index(ui.item) + 1); //On appelle via ajax tout les fils de l'élément et on les place apres . }
Voilà le code , n'hésiter pas à me demander si vous avez pas bien compris ce que je veux faire .

PS: un autre problème grave mais moins prioritaire , c'est lorsque je clique à côté d'un <ul> y a tout l'ul qui se déplace , de même si je clique entre 2 éléments des fois il bugs et me déplace le bloque <ul> , et lorsque cela arrive, le bloc disparait lorsqu'on le relâche. Voilà c'est moins urgent mais si jamais quelqu'un lit et connait le soucis je prend :)

Voilà j'espère que tout ceci servira à d'autres ;)

Merci d'avance pour vos réponses

11/05/2011, 21h02
danielhagnoul

Bonsoir

Je ne suis pas bien et pas en forme, c'est sans doute pourquoi je n'ai rien compris. Depuis le 25 avril, j'ai vu et traité d'autres sujets et j'ai eu tout le temps d'oublier le vôtre.

Pour comprendre, reproduire un problème et faire des tests, il me faut la totalité du code ou un lien vers une page de test.

J'examinerais le problème dès que j'irais mieux. :aie:
12/05/2011, 10h32
matrixofdeath

Bonjour,

je comprend c'est peut être pas évident quand on est pas dedans:

Alors je vous envoie 2 liens pour tests:

Celui-ci mais en avant le problème principal (on déplace une question si elle a des fils on les supprime visuellement pour les reafficher après dépôts ), pour attaper les questions fils je fait next().next('ul') , je ne sais pas pourquoi il faut mettre un next , sûrement un neoud vide , et quand il n'y a pas de fils ça me retourne [] dans console.log ), deplus il manque les numéros de hiérarchie à changer lors du dépôts , j'ai une fonction qui me permet de les avoir mais je pense que ça serait plus simple de le faire directement en jquery) , et dernier soucis des fois quand on clique a coté des question il ya le bloc ul qui se déplace donc tout un groupe de question et si on lâche au mauvais endroit , ça peut supprimer le bloc :s :

http://matrixofdeath2.free.fr/sortabletest2/

Le deuxième permet d'attribuer à tout mes li la possibilité d'accueillir une sous question :
http://matrixofdeath2.free.fr/sortabletest/

Voilà :roll:

Bonsoir

Je vais un peu mieux, mais je ne m'y retrouve pas mieux dans vos codes.

En restant dans le domaine des choses élémentaires :

Jamais de next().next(), le comportement pourra être imprévisible d'un navigateur à l'autre à cause des noeuds texte invisibles, mais nextAll("ul") par exemple. (http://api.jquery.com/nextAll/)
Chaque liste UI Sortable doit être indépendante.
Dans votre page de test, les sous-listes du point de vue de UI Sortable n'existent pas. En fait vous n'avez qu'une seule liste UI Sortable que jQuery n'arrive pas à gèrer convenablement.
Sur Firefox 4, votre page de test a pris une minute pour s'afficher !
Mettre plusieurs appels aux événements (start et stop) doit engendrer des problèmes. Il n'y a qu'un seul événement start et qu'un seul événement stop.

Exemple de plusieurs listes UI Sortables imbriquées :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/humanity/jquery-ui.css">
	<style>
		/* Base */
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:3px; padding-top:3px; }
        li {padding-bottom:3px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
        ul {width:200px; }
        li {margin-left: 24px; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<ul id="sortable1">
			<li class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 1 Item 1
            </li>
			<li class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 1 Item 2
                <ul id="sortable2">
                    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 2 Item 1</li>
                    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 2 Item 2</li>
                    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 2 Item 3</li>
                </ul>
            </li>
			<li class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 1 Item 3
            </li>
			<li class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 1 Item 4
                <ul id="sortable3">
                    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 3 Item 1</li>
                    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 3 Item 2</li>
                    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 3 Item 3</li>
                </ul>
            </li>
			<li class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List 1 Item 5
            </li>
		</ul>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-05-12T22:40:00.000+02:00" pubdate>2011-05-12</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
	<script>
		$(function(){
			$("#sortable1, #sortable2, #sortable3").sortable({
				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) = ', $(this).children("li").index(ui.item) + 1);
				}
			}).disableSelection();
		});
	</script>
</body>  
</html>