Sauvegarder l'ordre d'un DragDrop
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:
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 à votre guise.<br />
<br />
Ci dessous, vous trouverez la liste des modules activé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ède aucun raccoucis définis par le développeur.</em>';
?>
</td>
</tr>
</table>
</div>
</div>
<?php
}
?>
<p> </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