Bonjour à tous,
Juste un petit message avec la solution à ma problématique, en attendant de pouvoir faire mieux, j'avais pris comme solution de placer un input à côté de chaque image, et on pouvait saisir un num de position qui s'enregistrait en base.
Ces derniers temps j'ai eu du temps au boulot et je me suis donc remise à parcourir tuto, forum etc pour mettre en place mon drag and drop dont la position s’enregistrerait automatiquement en base (mon problème se situai précisément là), et j'ai fini par tomber sur ce tuto très utile :
http://www.wakdev.com/more/wiki/javascr ... mique.html
J'ai donc quelque peu modifié sa structure et voici le résultat qui correspond à mes besoins et fonctionne enfin
:
Ma page :
<!-- Styles drag -->
<style type="text/css">
.sortable_item {
cursor : move;
width : 100%;
list-style : none;
margin: 5px;
border: 1px solid #D8D8D8;
padding: 5px;
max-width: 200px;
text-align: center;
}
.ul_style {
list-style-type : none;
margin : 0;
padding : 0;
}
</style>
<!-- Scripts drag -->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="....../interface.js"></script> /** fichier chargé à partir du lien fourni dans le tuto **/
<script type="text/javascript">
$(document).ready (
function () {
$( "#sortlist" ).Sortable ( {
accept : 'sortable_item',
axis : 'vertically',
opacity : 0.6,
onchange : function ( sorted ) {
serial = $.SortSerialize ( 'sortlist' );
// requète Ajax pour l'enregistrement des positions
$.ajax ( {
url : "....../set_position.php",
type : "post",
data : serial.hash,
});
}
});
});
</script>
<?php if (count($house_photos) != 0) { ?>
<tr>
<td valign="top"><?php echo 'Faire glisser les photos pour modifier l\'ordre d\'affichage'; ?><br/></td>
<td valign="top" align="left">
<ul id="sortlist" class="ul_style">
<?php for ($i = 0; $i < count($house_photos); $i++) { ?>
<li id="<?php echo /**var id_photo 1**/; ?>" class="sortable_item">
<input type="checkbox" name="del_photos[]" value="<?php echo $house_photos[$i][0]; ?>" />
<img src="/**emplacement image 1**/" style="height:100px" alt="no such file"/>  
</li>
<li id="<?php echo /**var id_photo 2**/; ?>" class="sortable_item">
<input type="checkbox" name="del_photos[]" value="<?php echo $house_photos[$i][0]; ?>" />
<img src="/**emplacement image 2**/" style="height:100px" alt="no such file"/>  
</li>
<li id="<?php echo /**var id_photo 3**/; ?>" class="sortable_item">
<input type="checkbox" name="del_photos[]" value="<?php echo $house_photos[$i][0]; ?>" />
<img src="/**emplacement image 3**/" style="height:100px" alt="no such file"/>  
</li>
etc ...
<?php } ?>
</ul>
</td>
</tr>
<?php } ?>
Et mon fichier set_position.php pour enregistrer en base (j'ai dû le modifier un peu pour qu'il fonctionne, en ajoutant la requête SELECT) :
<?
$mysqli = new mysqli($serveur, $user, $pass, $base);
$db = mysql_connect('serveur', 'user', 'pass');
mysql_select_db('/** ma base de données** /',$db) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
$sql = "SELECT `id`, `position` FROM /** ma table **/ ";
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
while($data = mysql_fetch_assoc($req))
{
$sortlist = $_POST['sortlist'];
for ($i = 0; $i < count($sortlist); $i++) {
$query = ("UPDATE /** ma table **/ SET position ='".($i + 1)."' WHERE id=$sortlist[$i]");
$ajout = mysql_query($query) or die(mysql_error());
}
}
?>
Et enfin tout est OK, sujet clos
Bonjour à tous,
Juste un petit message avec la solution à ma problématique, en attendant de pouvoir faire mieux, j'avais pris comme solution de placer un input à côté de chaque image, et on pouvait saisir un num de position qui s'enregistrait en base.
Ces derniers temps j'ai eu du temps au boulot et je me suis donc remise à parcourir tuto, forum etc pour mettre en place mon drag and drop dont la position s’enregistrerait automatiquement en base (mon problème se situai précisément là), et j'ai fini par tomber sur ce tuto très utile : [url]http://www.wakdev.com/more/wiki/javascript-actionscript-vbscript/68-tri-drag-and-drop-dans-une-liste-dynamique.html[/url]
J'ai donc quelque peu modifié sa structure et voici le résultat qui correspond à mes besoins et fonctionne enfin :P :
Ma page :
[php]<!-- Styles drag -->
<style type="text/css">
.sortable_item {
cursor : move;
width : 100%;
list-style : none;
margin: 5px;
border: 1px solid #D8D8D8;
padding: 5px;
max-width: 200px;
text-align: center;
}
.ul_style {
list-style-type : none;
margin : 0;
padding : 0;
}
</style>
<!-- Scripts drag -->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="....../interface.js"></script> /** fichier chargé à partir du lien fourni dans le tuto **/
<script type="text/javascript">
$(document).ready (
function () {
$( "#sortlist" ).Sortable ( {
accept : 'sortable_item',
axis : 'vertically',
opacity : 0.6,
onchange : function ( sorted ) {
serial = $.SortSerialize ( 'sortlist' );
// requète Ajax pour l'enregistrement des positions
$.ajax ( {
url : "....../set_position.php",
type : "post",
data : serial.hash,
});
}
});
});
</script>
<?php if (count($house_photos) != 0) { ?>
<tr>
<td valign="top"><?php echo 'Faire glisser les photos pour modifier l\'ordre d\'affichage'; ?><br/></td>
<td valign="top" align="left">
<ul id="sortlist" class="ul_style">
<?php for ($i = 0; $i < count($house_photos); $i++) { ?>
<li id="<?php echo /**var id_photo 1**/; ?>" class="sortable_item">
<input type="checkbox" name="del_photos[]" value="<?php echo $house_photos[$i][0]; ?>" />
<img src="/**emplacement image 1**/" style="height:100px" alt="no such file"/>  
</li>
<li id="<?php echo /**var id_photo 2**/; ?>" class="sortable_item">
<input type="checkbox" name="del_photos[]" value="<?php echo $house_photos[$i][0]; ?>" />
<img src="/**emplacement image 2**/" style="height:100px" alt="no such file"/>  
</li>
<li id="<?php echo /**var id_photo 3**/; ?>" class="sortable_item">
<input type="checkbox" name="del_photos[]" value="<?php echo $house_photos[$i][0]; ?>" />
<img src="/**emplacement image 3**/" style="height:100px" alt="no such file"/>  
</li>
etc ...
<?php } ?>
</ul>
</td>
</tr>
<?php } ?>[/php]
Et mon fichier set_position.php pour enregistrer en base (j'ai dû le modifier un peu pour qu'il fonctionne, en ajoutant la requête SELECT) :
[php]<?
$mysqli = new mysqli($serveur, $user, $pass, $base);
$db = mysql_connect('serveur', 'user', 'pass');
mysql_select_db('/** ma base de données** /',$db) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
$sql = "SELECT `id`, `position` FROM /** ma table **/ ";
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
while($data = mysql_fetch_assoc($req))
{
$sortlist = $_POST['sortlist'];
for ($i = 0; $i < count($sortlist); $i++) {
$query = ("UPDATE /** ma table **/ SET position ='".($i + 1)."' WHERE id=$sortlist[$i]");
$ajout = mysql_query($query) or die(mysql_error());
}
}
?>[/php]
Et enfin tout est OK, sujet clos :D
