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

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 :oops:

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 :lol:)

Merci de votre aide !

Voici le code :

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
<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:

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>