Drag & drop met selectie uit database
Al langer heb ik een minpunt in het administratiepaneel van mijn website waar ik een oplossing voor zoek.
Het principe werkt zo:
Tabel SQL: plaatjes
Hierin staat data van foto's van dieren opgeslagen en elke soort heeft een unieke soortcode (kolom "code").
Bijv. duif = 1340 en kanarie = 1460
Telkens als er een foto wordt geupload dan wordt deze bijv. 1340_1.jpg en de tweede 1340_2.jpg
Bij de foto_edit.php haalt hij de foto's op via de GET functie, uit de url, bijv. php?id=1340
Op de edit pagina kan je de foto's uploaden en bewerken. Eerst haalt hij de soortcode uit de url (zie hiervoor) en maakt dan een selectie uit de tabel. Heel globaal via deze weg:
SELECT * FROM plaatjes WHERE code LIKE '$id'"
Het enige wat me niet lukt is het in de juiste volgorde plaatsen van de foto's.
Hiervoor wil ik een kolom "sorteercode" gebruiken.
De tabel met sorteernummer ziet er dan zo uit:
Quote:
ID code nummer bestand sorteernummer
234 1340 1 1340_1.jpg 2
235 1340 2 1340_2.jpg 3
236 1340 3 1340_3.jpg 1
237 1340 4 1340_4.jpg 4
234 1340 1 1340_1.jpg 2
235 1340 2 1340_2.jpg 3
236 1340 3 1340_3.jpg 1
237 1340 4 1340_4.jpg 4
Nu is de bedoeling dat als ik de foto's ga verslepen (drag en drop) dat de sorteernummers ook veranderen en via een submit functie de wijzigingen doorgeeft.
Op internet kan ik diverse drag en drop scripts vinden met JS en/of ajax, maar aanpassen naar bovenstaand principe lukt mij niet.
Heeft iemand een soortgelijk script paraat of kan mij een eindje op weg helpen?
Alle hulp is welkom!
--------
Toevoeging op 01/02/2013 04:11:22:
Na een nachtje werken heb ik een begin. Ik heb een script bewerkt die het dichtst in de buurt van het principe komt...maar hoewel de foto's verschijnen en de sorteermogelijkheid werkt, zet de verwerking naar 'sorteernummer' niet door.
Ook worden de fototjes op de pagina in het begin niet georgend volgens de sorteernummers (terwijl ik wel ASC) heb opgegeven.
Ik heb ongetwijfeld een reeks domme fouten gemaakt...
Volgordewijzigen.php
Quote:
<script type="text/javascript">
$("ul#sorteernummer").sortable({
opacity: 0.6,
cursor: 'move',
scrollSensitivity: 40,
update: function(){$('#message').html('Bezig met wijzigen...bevestig de volgorde wanneer u klaar bent.');
}
});
$('#button').click(function(event){
var order = $("ul#sorteernummer").sortable("serialize");
$('#message').html('Bezig met opslaan..');
$.post("move_save.php",order,function(theResponse){
$('#message').html(theResponse);
});
event.preventDefault();
});
</script>
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?
code = $_GET['code'];
$result = mysql_query("SELECT * FROM plaatjes WHERE code LIKE '$codee' ORDER BY sorteernummer ASC");
echo "<ul id='sorteernummer'>";
while ($item = mysql_fetch_array($result))
{
echo "<li nummer='".$item['nummer']."'><img src='../../database/foto/".$item['code']."_".$item['nummer'].".jpg' height='100' width='160' alt='' title='Preview'></li>";
}
echo "</ul>";
?>
code = $_GET['code'];
$result = mysql_query("SELECT * FROM plaatjes WHERE code LIKE '$codee' ORDER BY sorteernummer ASC");
echo "<ul id='sorteernummer'>";
while ($item = mysql_fetch_array($result))
{
echo "<li nummer='".$item['nummer']."'><img src='../../database/foto/".$item['code']."_".$item['nummer'].".jpg' height='100' width='160' alt='' title='Preview'></li>";
}
echo "</ul>";
?>
<script type="text/javascript">
$("ul#sorteernummer").sortable({
opacity: 0.6,
cursor: 'move',
scrollSensitivity: 40,
update: function(){$('#message').html('Bezig met wijzigen...bevestig de volgorde wanneer u klaar bent.');
}
});
$('#button').click(function(event){
var order = $("ul#sorteernummer").sortable("serialize");
$('#message').html('Bezig met opslaan..');
$.post("move_save.php",order,function(theResponse){
$('#message').html(theResponse);
});
event.preventDefault();
});
</script>
Volgordeverwerken.php
Quote:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?
$code = $_GET['code'];
$nieuwevolgorde = $_POST['sorteernummer'];
$counter = 1;
foreach ($nieuwevolgorde as $recordIDValue) {
$query = "UPDATE plaatjes WHERE code LIKE '$code' SET sorteernummer = " . $counter;
$query .= "WHERE nummer = " . intval($recordIDValue);
mysql_query($query) or die('Fout!');
$counter ++;
}
echo 'Volgorde opgeslagen.';
?>
$code = $_GET['code'];
$nieuwevolgorde = $_POST['sorteernummer'];
$counter = 1;
foreach ($nieuwevolgorde as $recordIDValue) {
$query = "UPDATE plaatjes WHERE code LIKE '$code' SET sorteernummer = " . $counter;
$query .= "WHERE nummer = " . intval($recordIDValue);
mysql_query($query) or die('Fout!');
$counter ++;
}
echo 'Volgorde opgeslagen.';
?>
Gewijzigd op 01/02/2013 04:13:50 door Tymo M
Ik ga dus uit dat je een id in hidden input velden zet.
Die komen dan in $_POST['nummer']; in move_save.php
Die zet je in een foreach.
Iets als
Code (php)
Code (php)
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
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
<form id="sorteerform">
<ul id="sorteernummer">
<li>
<input type="hidden" name="nummer[]" value="15">
<img src="http://www.davidsfondsdenderleeuw.be/2009-2010/Magritte_La_Grande_Guerre.jpg" height="100" width="160" alt="" title="Preview">
</li>
<li>
<input type="hidden" name="nummer[]" value="19">
<img src="http://i.telegraph.co.uk/multimedia/archive/01923/magritteWoman-with_1923689b.jpg" height="100" width="160" alt="" title="Preview">
</li>
<li>
<input type="hidden" name="nummer[]" value="21">
<img src="http://www.abcgallery.com/M/magritte/magritte53.JPG" height="100" width="160" alt="" title="Preview">
</li>
<li>
<input type="hidden" name="nummer[]" value="24">
<img src="http://4.bp.blogspot.com/-bCnTjW-17n8/UEDbvJhLyHI/AAAAAAAAFFg/tmgSEQ8Xxzs/s640/Rene+Magritte.jpg" height="100" width="160" alt="" title="Preview">
</li>
</ul>
</form>
<button id="button">Klik</button>
<div id="message"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul#sorteernummer").sortable({
opacity: 0.6,
cursor: 'move',
scrollSensitivity: 40,
update: function() {
$('#message').html('Bezig met wijzigen...bevestig de volgorde wanneer u klaar bent.');
}
});
$('#button').click(function(event) {
$.post(
"move_save.php",
$('#sorteerform').serialize(),
function(theResponse) {
$('#message').html(theResponse);
}
);
event.preventDefault();
});
})
</script>
<ul id="sorteernummer">
<li>
<input type="hidden" name="nummer[]" value="15">
<img src="http://www.davidsfondsdenderleeuw.be/2009-2010/Magritte_La_Grande_Guerre.jpg" height="100" width="160" alt="" title="Preview">
</li>
<li>
<input type="hidden" name="nummer[]" value="19">
<img src="http://i.telegraph.co.uk/multimedia/archive/01923/magritteWoman-with_1923689b.jpg" height="100" width="160" alt="" title="Preview">
</li>
<li>
<input type="hidden" name="nummer[]" value="21">
<img src="http://www.abcgallery.com/M/magritte/magritte53.JPG" height="100" width="160" alt="" title="Preview">
</li>
<li>
<input type="hidden" name="nummer[]" value="24">
<img src="http://4.bp.blogspot.com/-bCnTjW-17n8/UEDbvJhLyHI/AAAAAAAAFFg/tmgSEQ8Xxzs/s640/Rene+Magritte.jpg" height="100" width="160" alt="" title="Preview">
</li>
</ul>
</form>
<button id="button">Klik</button>
<div id="message"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul#sorteernummer").sortable({
opacity: 0.6,
cursor: 'move',
scrollSensitivity: 40,
update: function() {
$('#message').html('Bezig met wijzigen...bevestig de volgorde wanneer u klaar bent.');
}
});
$('#button').click(function(event) {
$.post(
"move_save.php",
$('#sorteerform').serialize(),
function(theResponse) {
$('#message').html(theResponse);
}
);
event.preventDefault();
});
})
</script>
De ID speelt geen rol van betekenis. Dit is puur een id in de sql database/tabel, waar het vooral om gaat is het sorteernummer. Volgens mij is er niet persé een form nodig bij dit script.
De tabel "plaatjes" bevat ruim 3000 foto's met ongeveer 1000 diersoorten. De weergave in bericht één toont een selectie van hoe één soort in de tabel staat onder een code. Het aantal foto's per soort kan varieren van 1 foto tot 12.
Het enige wat geüpdate moet worden, zijn de velden "sorteernummer", op basis van de volgorde van de plaatjes zoals deze via de drag-drop in een nieuwe volgorde zijn gesleept.
Ik zal kijken of ik een beeld bij het woord kan produceren.
Herkomst van het script:
http://www.simonbattersby.com/blog/drag-and-drop-with-jquery-ui/
Toevoeging op 02/02/2013 00:58:44:
Tymo M op 02/02/2013 00:31:53:
De ID speelt geen rol van betekenis. Dit is puur een id in de sql database/tabel, ... Het enige wat geüpdate moet worden, zijn de velden "sorteernummer", op basis van de volgorde van de plaatjes zoals deze via de drag-drop in een nieuwe volgorde zijn gesleept. ...
Dat is wat mijn code doet.
Je hebt een id nodig om de records te identificeren ( in de WHERE ).
En sorteernummer is precies wat je krijgt als je die foreach laat lopen.
Je kan nog een <input type="hidden" name="code" value="1340"> toevoegen aan het form, net buiten de <ul>
Dan kan je die ook verwerken in de sql
Gewijzigd op 02/02/2013 10:25:48 door Kris Peeters
Waar ik nog mee zit is het script in Volgordewijzigen.php
Je gaat hier uit van 4 foto's, maar deze bezitten geen variabelen. Het aantal foto's is wisselend, dus deze moeten uit de database geselecteerd worden. Het aantal foto's en de waarden hiervan moeten dynamisch opgehaald worden. Er zal toch op een of andere wijze een query bij moeten die de afbeeldingen ophaalt en weergeeft.
Ik heb nu dit:
<form id="sorteerform">
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?
$speciescode = $_GET['code'];
$result = mysql_query("SELECT * FROM plaatjes WHERE code LIKE '$code' ORDER BY sorteernummer ASC");
echo "<ul id='sorteernummer'>";
while ($item = mysql_fetch_array($result))
{
echo "<li sorteernummer='".$item['sorteernummer']."'>".$item['nummer']."<input type='text' name='nummer[]' value='" .$item['sorteernummer']. "'><img src='../../database/photo/".$item['code']."_".$item['nummer'].".jpg' height='100' width='160' alt=''></li>";
}
echo "</ul>";
?>
$speciescode = $_GET['code'];
$result = mysql_query("SELECT * FROM plaatjes WHERE code LIKE '$code' ORDER BY sorteernummer ASC");
echo "<ul id='sorteernummer'>";
while ($item = mysql_fetch_array($result))
{
echo "<li sorteernummer='".$item['sorteernummer']."'>".$item['nummer']."<input type='text' name='nummer[]' value='" .$item['sorteernummer']. "'><img src='../../database/photo/".$item['code']."_".$item['nummer'].".jpg' height='100' width='160' alt=''></li>";
}
echo "</ul>";
?>
Misschien zou de WHERE hier naar voren verplaatst kunnen worden? Door een selectie te maken die gewijzigd moet worden (alleen de plaatjes met code ####)
$query = mysql_query("SELECT * FROM plaatjes WHERE code LIKE '$code'") or die (mysql_error());
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?
$speciescode = $_GET['code'];
$var = mysql_fetch_object($query);
$counter = 1;
foreach ($_POST['nummer'] as $key=>$id) {
$query = "UPDATE plaatjes SET sorteernummer= " . intval($key) . " WHERE id=" . intval($id) . " AND code LIKE " . $code;
mysql_query($query) or die('Fout!');
$counter ++;
}
echo 'Volgorde opgeslagen.';
?>
$speciescode = $_GET['code'];
$var = mysql_fetch_object($query);
$counter = 1;
foreach ($_POST['nummer'] as $key=>$id) {
$query = "UPDATE plaatjes SET sorteernummer= " . intval($key) . " WHERE id=" . intval($id) . " AND code LIKE " . $code;
mysql_query($query) or die('Fout!');
$counter ++;
}
echo 'Volgorde opgeslagen.';
?>
Gewijzigd op 02/02/2013 17:51:53 door Tymo M