Tri images dans catégories et enregistrement base de données

**lorentdups** · 29/03/2014, 10h15

Bonjour,

je cherche à trier des images par drag and drop (j'y suis arrivé) dans des catégories et à ce que soit enregistré dans la BDD.
j'ai trouvé des choses dont je me suis inspiré mais impossible de finaliser

mais je souhaiterai aussi que quand on clique sur l'image, elle fasse apparaitre dans une div un formulaire pour ajouter des commentaires (si c'est pas trop demander

)

Merci de votre aide !

Voici le code :

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
<fieldset>
        <legend><h3 id="affich">Classement des photos et commentaires</h3></legend>
 
 
<div class="span5">
 
 
<?PHP 
 
  $path  = "http://www.mon-site.com/upload/$id_membre/cabinet";
  $pathS = "http://www.mon-site.com/upload/$id_membre/cabinet/small";
 
 
 
 
// Affiche les non classés
$resultat0 = mysql_query("SELECT * FROM $table_photos WHERE Pid=$id_membre AND Pcat='1' AND Pcategorie='' ORDER BY Pordre ASC");
 
        echo '<fieldset><legend><h4>Non class&eacute;</h4></legend>
              <div id="Non class&eacute;" class="sortable-list">'; 
 
 while ($row=mysql_fetch_array($resultat0)) { 
 
  if (mysql_num_rows($resultat0)==0) {echo 'Pas de photo';} 
  else {
 
  $Image = explode(".", $row["Pnom"]);
    $NomImage = $Image[0];
    $ExtentionImage = $Image[1];
 
echo '
    <a href="'.$path.'/'.$NomImage.'.'.$ExtentionImage.'" title="'.$row["Pdescriptif"].'" id='.$row["idPhoto"].'">
        <img src="'.$pathS.'/'.$NomImage.'_thumb.'.$ExtentionImage.'" alt="'.$row["Pdescriptif"].'" style="max-width: 50px;padding:5px;">
    </a> ';
 
        };
                                              }; // fin du while
 
echo '</div></fieldset>';
 
 
 
 
 
// Affiche les catégories                                              
 
$resultat1 = mysql_query("SELECT * FROM $table_cat_photos WHERE id_Mbre=$id_membre");
 
  $row1=mysql_fetch_array($resultat1); 
 
  $liste_cat = explode("##", $row1['categories'], "-1");
  for($i=0; $i<count($liste_cat);$i++ ) { list($CatOrdre, $CatNom) = explode("|", $liste_cat[$i]);
 
            echo '<fieldset><legend><h4>'.$CatNom.'</h4></legend>
              <div id="'.$CatNom.'" class="sortable-list">'; 
 
 
    // Affiche les images par catégories   
    $resultat2 = mysql_query("SELECT * FROM $table_photos WHERE Pid=$id_membre AND Pcat='1' AND Pcategorie=$CatNom ORDER BY Pordre ASC");
 
  if (mysql_num_rows($resultat2)==0) {echo '&nbsp;<br>';} 
  else {
 
 while ($row2=mysql_fetch_array($resultat2)) { 
 
 
 
  $Image = explode(".", $row2["Pnom"]);
    $NomImage = $Image[0];
    $ExtentionImage = $Image[1];
 
echo '
    <a href="'.$path.'/'.$NomImage.'.'.$ExtentionImage.'" title="'.$row2["Pdescriptif"].'" id='.$row2["idPhoto"].'">
        <img src="'.$pathS.'/'.$NomImage.'_thumb.'.$ExtentionImage.'" alt="'.$row2["Pdescriptif"].'" style="max-width: 50px;padding:5px;">
    </a> ';
 
        }; // fin du while
                                              }; 
 
echo '</div></fieldset><br>';
 
                                              }; // fin du for
 
 
 
?>
</div>
<div id="formulaire" class="span7">
</div>

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
<script>
var __links = document.querySelectorAll('a');
function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;
for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('data-t') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}
</script>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 
<script>$('.sortable-list').sortable({
  connectWith: '.sortable-list',
  update: function(event, ui) {
    var changedList = this.id;
    var order = $(this).sortable('toArray');
    var positions = order.join(';');
 
    console.log({
      id: changedList,
      positions: positions
    });
  }
});
</script>