version: jquery-ui-1.7

J'ai des petites portlet dans un container que je peux déplacer sur 6 colonnes.

l'objectif est de sauvegarder leur position dans une SGBD ou un cookie.

Tout d'abord, je construis mon tableau avec le script ci-dessous; on voit bien la position des item, içi 4 (item-1 à item-4, cf code html plus bas) mais je n'arrive pas à sauvegarder mon tableau intégralement, mais seulement colonne à colonne (je vois bien l'update ans la SGBD).

Le probleme si situe au niveau du stop: function(), mais je ne n'arrive pas à trouver par quoi le remplacer pour sauvegarder la variable MonTableau intégralement pour le mettre dans ma SGBD via l'update que vous pouvez apercevoir.

code JQUERY:
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
$(function() {
 
$(".column").sortable({ 
  connectWith: ['.column'], 
  stop: function() { 
 
        $(".column").each(function(){ 
	var MonTableau = $(this).sortable("toArray");
 
	var totodb = "UPDATE  `widget` SET  `top` =  '" + MonTableau +"'  WHERE  `nom` = 'draggable0';";
 
	$.ajax({
		url: "sgbd_action.php",
		type: "POST",
		data: "data=" + totodb,
		// complete: function(){},
		success: function(feedback){ $('#data').html(feedback); }
	// error: function(){}
	});
 
	}); } });
 
//code du portlet classic issue de site jquery ui
 
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
		.find(".portlet-header")
		.addClass("ui-widget-header ui-corner-all")
		.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
		.end()
		.find(".portlet-content");
 
$(".portlet-header .ui-icon").click(function() {
	$(this).toggleClass("ui-icon-minusthick");
	$(this).parents(".portlet:first").find(".portlet-content").toggle();
		});
 
$(".column").disableSelection();
 
	});
Le code HTML:
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
        <div id="containment-wrapper">
 
          <div id="col1" class="column">
            <div class="portlet" id="item-1">
              <div class="portlet-header">1</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit</div>
            </div>
            <div class="portlet" id="item-2">
              <div class="portlet-header">2</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
                        <div class="portlet" id="item-3">
              <div class="portlet-header">3</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
          </div>
          <div id="col2" class="column">
                      <div class="portlet" id="item-4">
              <div class="portlet-header">4</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            </div>
          <div id="col3" class="column"></div>
          <div id="col4" class="column"></div>
          <div id="col5" class="column"></div>
          <div id="col6" class="column"></div>
 
        </div>
Si vous pouviez m'aider

Merci

Oulahoup