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 :
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
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
<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é</h4></legend>
<div id="Non classé" 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 ' <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>
<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>
Bonsoir, pour te donner un coup de main, j'aurais besoin de l'ensemble de ton code (html, js, php) et un dump du sql pour le monter en local. Je penses que ton problème à une solution en ajoutant une classe objet sur les actions déclinées.
RépondreSupprimerJe test dès que j'ai les éléments.