Fonction sortable et mysql

**pi-2r** · 26/08/2012, 17h09

Bonjour,

j'en appel à vous suite à un probleme qui me géne depuis quelques jours. Je m'explique, j'utiilse du drag and drop pour passer les éléments d'une listes à une autre comme l'exemple du site officiel: http://jqueryui.com/demos/sortable/#empty-lists, et dont le code et le suivant:

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
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
<meta charset="utf-8">
	<style>
	#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
	#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
	<script>
	$(function() {
		$( "ul.droptrue" ).sortable({
			connectWith: "ul"
		});
 
		$( "ul.dropfalse" ).sortable({
			connectWith: "ul",
			dropOnEmpty: false
		});
 
		$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
	});
	</script>
 
 
<div class="demo">
 
<ul id="sortable1" class='droptrue'>
	<li class="ui-state-default">Can be dropped..</li>
	<li class="ui-state-default">..on an empty list</li>
	<li class="ui-state-default">Item 3</li>
	<li class="ui-state-default">Item 4</li>
	<li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class='dropfalse'>
	<li class="ui-state-highlight">Cannot be dropped..</li>
	<li class="ui-state-highlight">..on an empty list</li>
	<li class="ui-state-highlight">Item 3</li>
	<li class="ui-state-highlight">Item 4</li>
	<li class="ui-state-highlight">Item 5</li>
</ul>
 
<ul id="sortable3" class='droptrue'>
</ul>
 
<br clear="both" />
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>
	Prevent all items in a list from being dropped into a separate, empty list
	using the <code>dropOnEmpty</code> option set to <code>false</code>.  By default,
	sortable items can be dropped on empty lists.
</p>
</div><!-- End demo-description -->

.

Mon problème, et même après avoir chercher sur le net, je n'arrive toujours à enregistrer dans une BDD un élément qui à été déplacer d'un tableau à l'autre ....
Si quelqu'un sait comment faire, je suis preneur d'une solution

**Bovino** · 27/08/2012, 08h29

Il faut utiliser les événements mis à disposition par le plugin, notamment l'événement update.
Sur cet événement, il suffit de faire un appel AJAX pour mettre à jour ta BDD.

**pi-2r** · 27/08/2012, 16h00

Merci de ta réponse

mais est-ce-que tu pourrais me donner un exemple que je pourrais retravailler, car comme ça, je ne vois pas trop. J'ai trouver des exemples avec un appel ajax, mais c'est fait juste pour un tableau contenant une liste modifiable ...

Merci d'avance

**pi-2r** · 27/08/2012, 18h51

Bonsoir,

bon j'ai écrit ce morceau de code pour en fonction du nombre de mes tableaux

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
25
26
27
28
29
30
31
32
33
34
35
 
<!--------------- Début zone drag and drop avec prés enregistrement -------->
<?php
$a = 5;
while ($a < 12)
{
?>
<script type="text/javascript">
/**** Fin des catégories **********/
$(document).ready( function()
{
 $("#list-photos<?php
echo $a;
?>").sortable({
		/*placeholder: 'highlight',*/
               connectWith: "ul",
		update: function() {
			var order = $('#list-photos<?php
echo $a;
?>').sortable('serialize');
       /* $.post('action_employen.php',order);*/
        alert(order);
 
		}
	});
  $("#list-photos<?php
echo $a;
?>").disableSelection();
});
</script>
<?php
 $a = $a + 1;
}
?>
<!------------- Fin zone drag and drop avec prés-enregistrement --------------->

alert(order) marche bien, j'ai bien le pop-up avec l'id de l'image que j'ai déplacer dans le tableau, mais comment faire pour récupérer la valeur du tableau et l'envoyer dans action_employe.php ?

Merci d'avance