Sauvegarder l'ordre d'un DragDrop

**Khalan76** · 26/08/2009, 11h16

Bonjour

Je suis en train de développer un CMS et, afin de rendre son utilisation plus agréable, j'ai intégré un javascript permettant de repositionner certaines parties de l'interface d'administration.

Voici un vidéo pour vous faire une idée précise de ce qui se passe : http://www.alwin.fr/dragdrop.swf

Comme vous le voyez, le javascript permettant de glisser déposer les <div> contenant les différents modules ( issues d'une table SQL ) effectue parfaitement son travail mais malheureusement, les modifications apportées par le membre ne sont pas sauvegardées.

Voici le code qui est utilisé :

Code PHP :

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?
$page = 'index';
include('includes/precompile.php');
include('design/header.php');
 
	echo '<div id="center">';
	echo 'Bonjour <strong>'.$_SESSION['pseudo'].'</strong>,<br /><a href="deconnexion.php">Me deconnecter</a> - <a href="../">Retour au site</a>';
?>
<div style="float:right; width:290px; margin-top:33px;">
<?php
$membres = db_compte("a_membres");
$pages = db_compte("m_pages");
?>
<p class="titre_statistique">Statistiques</p>
<br />
Nombre de membres : <strong><?php echo $membres; ?></strong><br />
Nombre de pages (Tous statuts confondus) : <strong><?php echo $pages; ?></strong><br />
<br />
Vous avez actuellement <strong>0</strong> article(s) en attentes de validation.
</div>
 
<h3>Administration</h3>
<p class="main">
Bienvenue sur l'administration du site.<br />
Via cette interface, vous pourrez transformer et personnaliser votre site &agrave; votre guise.<br />
<br />
Ci dessous, vous trouverez la liste des modules activ&eacute;s de votre site. Si vous souhaitez modifier cette liste, rendez-vous sur la page "<a href="modules.html">modules</a>".</p>
 
<style type="text/css" media="all">
html
{
	height: 100%;
}
img{
	border: none;
}
.groupWrapper
{
	width: 65%;
	float: left;
	margin-right: 1%;
	min-height: 400px;
}
.serializer
{
	clear: both;
}
.groupItem .itemHeader
{
	color:#414141;
}
 
.groupItem .itemHeader a
{
}
.sortHelper
{
	border: 3px dashed #666;
	width: auto !important;
}
.groupWrapper p
{
	height: 1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
 
<div id="sort1" class="groupWrapper">
<?php
$requete = requete("SELECT * FROM a_modules m WHERE m.statut_module='1'",1);
 
while($a = mysql_fetch_array($requete))
{
?>
<div class="groupItem">
<div class="itemHeader" id="<?php echo $a['id_module']; ?>">
 
<table>
    <tr>
        <td>
            <img src="design-module/<?php echo $a['icone_module']; ?>" alt="Icone du module : <?php echo ucfirst($a['nom_module']); ?>" title="<?php echo ucfirst($a['nom_module']); ?>" />
        </td>
        <td style="padding-left:20px;">
    <?php
 
    if(!empty($a['actions_module']))
        echo $a['actions_module'];
    else
        echo ucfirst($a['nom_module']).'.<br />
    <em>Ce module ne poss&egrave;de aucun raccoucis d&eacute;finis par le d&eacute;veloppeur.</em>';
    ?>
      	</td>  
    </tr>	
</table>
</div>
</div>
<?php
}
?>
 
<p>&nbsp;</p>
</div>
<script type="text/javascript">
$(document).ready(
	function () {
		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);
function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash);
};
</script>
<?
include('design/footer.php');
?>

Auriez-vous une idée pour sauvegarder l'ordre ?
J'ai oublié de préciser que je ne connais malheureusement rien au javascript ce qui a rendu mes recherches assez difficiles ...

Merci d'avance,
Khalan76

**Khalan76** · 26/08/2009, 14h28

Je viens de résoudre mon problème

Sauvegarder l'ordre d'un DragDrop

JavaScript

Discussions similaires

Partager

Partager