bonjour à tous ,
voilà j'ai fais un script de drag ans drop en suivant un tuto , mais j'ai du mal comprendre quelques choses et du coup cela ne fonctionne pas comme cela devrait .....
mon problème est le suivant , je charge des photos sur une page , le but étant de pouvoir organiser les photos dans l'ordre que l'on souhaite et que cela s'enregistre dans la bdd ( colonne position ) .
l'enregistrement se passe très bien , mais le problème c'est que les photos ne se déplace pas comme je le souhaite , dès que je déplace une photo , je ne peu pas la mettre ou je veux elle se mets au début de ma liste .
alors que normalement je devrais pouvoir la placer ou je le souhaite .
(pour infos le script suivant marche très bien , mais je n'arrive pas enregistrer la position dans la bdd )
Code : Tout sélectionner
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 800px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 150px; height: 150px; font-size: 4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<?php
include('connect.php');
$resultat=$pdo->query("SELECT * FROM photo_bien INNER JOIN bien ON bien.Id_bien = photo_bien.Id_bien WHERE photo_bien.Id_bien = 14");
$resultat->setFetchMode(PDO::FETCH_OBJ);
while($result = $resultat->fetch() )
{
$dossier = $result->photo;
$file = $result->photo_bien;
$Id_bien = $result->Id_bien;
$Id_photo = $result->Id_photo;
if(($result->photo_bien) == true )
{
?>
<li id="<?php echo $Id_photo; ?>" class="ui-state-default"><img width="150" height="150" src="<?php echo $file; ?>"></li>
<?php
}
}
?>
</ul>
</body>
</html>
je ne sais pas si j'ai été assez clair , mais voici le code .....et merci pour votre aide , je suis débutant ...
Code : Tout sélectionner
<ul id="sortlist" class="ul_style">
<?php
include('connect.php');
$resultat=$pdo->query("SELECT * FROM photo_bien INNER JOIN bien ON bien.Id_bien = photo_bien.Id_bien WHERE photo_bien.Id_bien = '".$Id_bien."'");
$resultat->setFetchMode(PDO::FETCH_OBJ);
while($result = $resultat->fetch() )
{
$dossier = $result->photo;
$file = $result->photo_bien;
$Id_bien = $result->Id_bien;
$Id_photo = $result->Id_photo;
if(($result->photo_bien) == true )
{
?>
<li id="<?php echo $Id_photo; ?>" class="sortable_item"><img width="150" src="<?php echo $file; ?>">
<form class="photo_avant" id="valid_photo_avant_<?php echo $file;?>" method="post" action="valid_photo_avant.php" enctype="multipart/form-data">
<input type="hidden" name="Id_bien" value="<?php echo $Id_bien;?>">
<input type="hidden" name="photo" value="<?php echo $file;?>">
<input type="hidden" name="Id_photo" value="<?php echo $Id_photo;?>">
<label class="favori" ><input class="favori" title="favori" width="52%" type="image" src="<?php if(($result->photo_en_avant) == $file) { echo 'images/favori_vert.png';}else { echo 'images/favori.png'; } ?>" onchange="document.getElementById('valid_photo_avant').submit()"> </label>
</form>
<form class="supp_photo" id="valid_supp_photo_<?php echo $file;?>" method="post" action="valid_supp_photo.php" enctype="multipart/form-data">
<input type="hidden" name="Id_bien" value="<?php echo $Id_bien;?>">
<input type="hidden" name="photo" value="<?php echo $file;?>">
<input type="hidden" name="Id_photo" value="<?php echo $Id_photo;?>">
<label class="corbeille" ><input class="corbeille" title="Supprimer" width="70%" type="image" src="images/corbeille.jpg" onchange="document.getElementById('valid_supp_photo').submit()"></label>
</form>
</li>
<?php
}
}
?>
</ul>
<script type="text/javascript">
$(document).ready (
function () {
$( "#sortlist" ).Sortable ( {
accept : 'sortable_item',
axis : 'y',
onchange : function ( sorted ) {
serial = $.SortSerialize ( 'sortlist' );
// requète Ajax pour l'enregistrement des positions
$.ajax ( {
url : "set_position.php",
type : "post",
data : serial.hash,
// Si vous avez besoin d'un feedback de la requête vous
// pouvez utiliser ces fonctions ci dessous.
// complete: function(data){alert(data);},
// success: function(feedback){ $('#data').html(feedback);},
// error: function(){alert('Erreur lors du déplacement');}
});
}
});
});
</script>
et le fichier d'enregistrement :
Code : Tout sélectionner
<?
include('connect.php');
// Récupération des valeurs post
$sortable = $_POST['sortable'];
// On update la table avec les nouvelles positions
for ($i = 0; $i < count($sortable); $i++) {
// SQL :
$pdo->exec("update photo_bien set position ='".($i + 1)."' where Id_photo = '".$sortable[$i]."'");
}
?>bonjour à tous ,
voilà j'ai fais un script de drag ans drop en suivant un tuto , mais j'ai du mal comprendre quelques choses et du coup cela ne fonctionne pas comme cela devrait .....
mon problème est le suivant , je charge des photos sur une page , le but étant de pouvoir organiser les photos dans l'ordre que l'on souhaite et que cela s'enregistre dans la bdd ( colonne position ) .
l'enregistrement se passe très bien , mais le problème c'est que les photos ne se déplace pas comme je le souhaite , dès que je déplace une photo , je ne peu pas la mettre ou je veux elle se mets au début de ma liste .
alors que normalement je devrais pouvoir la placer ou je le souhaite .
(pour infos le script suivant marche très bien , mais je n'arrive pas enregistrer la position dans la bdd )
[code]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 800px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 150px; height: 150px; font-size: 4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<?php
include('connect.php');
$resultat=$pdo->query("SELECT * FROM photo_bien INNER JOIN bien ON bien.Id_bien = photo_bien.Id_bien WHERE photo_bien.Id_bien = 14");
$resultat->setFetchMode(PDO::FETCH_OBJ);
while($result = $resultat->fetch() )
{
$dossier = $result->photo;
$file = $result->photo_bien;
$Id_bien = $result->Id_bien;
$Id_photo = $result->Id_photo;
if(($result->photo_bien) == true )
{
?>
<li id="<?php echo $Id_photo; ?>" class="ui-state-default"><img width="150" height="150" src="<?php echo $file; ?>"></li>
<?php
}
}
?>
</ul>
</body>
</html>[/code]
je ne sais pas si j'ai été assez clair , mais voici le code .....et merci pour votre aide , je suis débutant ...
[code]<ul id="sortlist" class="ul_style">
<?php
include('connect.php');
$resultat=$pdo->query("SELECT * FROM photo_bien INNER JOIN bien ON bien.Id_bien = photo_bien.Id_bien WHERE photo_bien.Id_bien = '".$Id_bien."'");
$resultat->setFetchMode(PDO::FETCH_OBJ);
while($result = $resultat->fetch() )
{
$dossier = $result->photo;
$file = $result->photo_bien;
$Id_bien = $result->Id_bien;
$Id_photo = $result->Id_photo;
if(($result->photo_bien) == true )
{
?>
<li id="<?php echo $Id_photo; ?>" class="sortable_item"><img width="150" src="<?php echo $file; ?>">
<form class="photo_avant" id="valid_photo_avant_<?php echo $file;?>" method="post" action="valid_photo_avant.php" enctype="multipart/form-data">
<input type="hidden" name="Id_bien" value="<?php echo $Id_bien;?>">
<input type="hidden" name="photo" value="<?php echo $file;?>">
<input type="hidden" name="Id_photo" value="<?php echo $Id_photo;?>">
<label class="favori" ><input class="favori" title="favori" width="52%" type="image" src="<?php if(($result->photo_en_avant) == $file) { echo 'images/favori_vert.png';}else { echo 'images/favori.png'; } ?>" onchange="document.getElementById('valid_photo_avant').submit()"> </label>
</form>
<form class="supp_photo" id="valid_supp_photo_<?php echo $file;?>" method="post" action="valid_supp_photo.php" enctype="multipart/form-data">
<input type="hidden" name="Id_bien" value="<?php echo $Id_bien;?>">
<input type="hidden" name="photo" value="<?php echo $file;?>">
<input type="hidden" name="Id_photo" value="<?php echo $Id_photo;?>">
<label class="corbeille" ><input class="corbeille" title="Supprimer" width="70%" type="image" src="images/corbeille.jpg" onchange="document.getElementById('valid_supp_photo').submit()"></label>
</form>
</li>
<?php
}
}
?>
</ul>
<script type="text/javascript">
$(document).ready (
function () {
$( "#sortlist" ).Sortable ( {
accept : 'sortable_item',
axis : 'y',
onchange : function ( sorted ) {
serial = $.SortSerialize ( 'sortlist' );
// requète Ajax pour l'enregistrement des positions
$.ajax ( {
url : "set_position.php",
type : "post",
data : serial.hash,
// Si vous avez besoin d'un feedback de la requête vous
// pouvez utiliser ces fonctions ci dessous.
// complete: function(data){alert(data);},
// success: function(feedback){ $('#data').html(feedback);},
// error: function(){alert('Erreur lors du déplacement');}
});
}
});
});
</script> [/code]
et le fichier d'enregistrement :
[code]<?
include('connect.php');
// Récupération des valeurs post
$sortable = $_POST['sortable'];
// On update la table avec les nouvelles positions
for ($i = 0; $i < count($sortable); $i++) {
// SQL :
$pdo->exec("update photo_bien set position ='".($i + 1)."' where Id_photo = '".$sortable[$i]."'");
}
?>[/code]
