Schuiven
Je kent het vast wel, van iGoogle dat je die gadgets kunt verschuiven.
Dit wil ik ook maken voor een sorteer volgorde.
Dit is mijn database:
CREATE TABLE `klasse` (
`id` int(11) NOT NULL auto_increment,
`klasse` varchar(100) collate utf8_unicode_ci NOT NULL,
`volg_nr` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=34 ;
Er zijn dus verschillende klassen, deze wil ik in een andere volgorde kunnen zetten, zie volg_nr.
Dat wil ik op deze manier doen:
Klasse1
Klasse2
Klasse3
Klasse4
Klasse5
Klasse6
En dat je dan op Klasse1 kan klikken (ingedrukt houden) en dan bijvoorbeeld onderop plaatsen of ergens ertussen of wat dan ook.
Hoe krijg ik dit voor elkaar -> ik denk AJAX ??
Wie kan mij opweg helpen ?
mvg Joost
Ik ga eerst even proberen om mijn data op zo'n manier erin te krijgen, ik roep wel een keer als er een probleem opduikt :-).
mvg Joost.
Edit::
Gewijzigd op 01/01/1970 01:00:00 door /home/joost
Gelieve Niet Bumpen::
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de 
knop om je tekst aan te passen.
SanThe.
knop om je tekst aan te passen.SanThe.
Gewijzigd op 01/01/1970 01:00:00 door /home/joost
Quote:
Ik heb nu dit script met bovenstaande database.
Maar hoe kan ik nu de data bewerken/opslaan ??
Maar hoe kan ik nu de data bewerken/opslaan ??
Misschien is het handiger als je wat relevante code van het script plaatst.
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
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
<link rel="stylesheet" href="lib/page.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="lib/default.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/effects.js"></script>
<script type="text/javascript" src="lib/builder.js"></script>
<script type="text/javascript" src="lib/dragdrop.js"></script>
<script type="text/javascript" src="lib/portal.js"></script>
<script type="text/javascript">
var portal;
function onOverWidget(portal, widget) {
widget.getElement().insertBefore($('control_buttons'), widget.getElement().firstChild);
$('control_buttons').show();
}
function onOutWidget(portal, widget) {
$('control_buttons').hide();
}
function removeWidget(element) {
var widget = $(element).up(".widget").widget;
if (confirm('Are sure to remove this widget?')) {
document.body.appendChild($('control_buttons').hide())
portal.remove(widget);
}
}
function onChange() {
}
function init() {
portal = new Xilinus.Portal("#page div", {onOverWidget: onOverWidget, onOutWidget: onOutWidget, onChange: onChange, removeEffect: Effect.SwitchOff});
// Fake widgets
<?php
$sql=mysql_query("SELECT * FROM klasse") or die(mysql_error());
while ($row=mysql_fetch_assoc($sql)) {
?>
portal.add(new Xilinus.Widget().setTitle("<?php print $row["klasse"]; ?>"), 0);
<?php
}
?>
// Add controls buttons
portal.addWidgetControls("control_buttons");
}
Event.observe(window, "load", init);
</script>
<link rel="stylesheet" href="lib/default.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/effects.js"></script>
<script type="text/javascript" src="lib/builder.js"></script>
<script type="text/javascript" src="lib/dragdrop.js"></script>
<script type="text/javascript" src="lib/portal.js"></script>
<script type="text/javascript">
var portal;
function onOverWidget(portal, widget) {
widget.getElement().insertBefore($('control_buttons'), widget.getElement().firstChild);
$('control_buttons').show();
}
function onOutWidget(portal, widget) {
$('control_buttons').hide();
}
function removeWidget(element) {
var widget = $(element).up(".widget").widget;
if (confirm('Are sure to remove this widget?')) {
document.body.appendChild($('control_buttons').hide())
portal.remove(widget);
}
}
function onChange() {
}
function init() {
portal = new Xilinus.Portal("#page div", {onOverWidget: onOverWidget, onOutWidget: onOutWidget, onChange: onChange, removeEffect: Effect.SwitchOff});
// Fake widgets
<?php
$sql=mysql_query("SELECT * FROM klasse") or die(mysql_error());
while ($row=mysql_fetch_assoc($sql)) {
?>
portal.add(new Xilinus.Widget().setTitle("<?php print $row["klasse"]; ?>"), 0);
<?php
}
?>
// Add controls buttons
portal.addWidgetControls("control_buttons");
}
Event.observe(window, "load", init);
</script>
Maar ik zou niet weten wat ik als relevante code neer moest zetten, daarom had ik dat zip bestand erbij gedaan ;)
mvg Joost.
Gewijzigd op 01/01/1970 01:00:00 door /home/joost
Google eens naar: mootools dragable autosave
Iemand toevallig nog een goed linkje/scriptje ???
Scriptaculous biedt diverse drag & drop en nog veel meer ajax scripts!
Ook is er een demo te zien, dus dan weet je gelijk of dit was voor je is?
Kijk anders rechts in de lijst even naar drag of sortables ofzo.
http://wiki.github.com/madrobby/scriptaculous/puzzle-demo
http://users.telenet.be/Links1/popup.html
mvg Joost.
function saveImageOrder()
{
var orderString = "";
var objects = document.getElementsByTagName('DIV');
for(var no=0;no<objects.length;no++){
if(objects[no].className=='imageBox' || objects[no].className=='imageBoxHighlighted'){
if(orderString.length>0)orderString = orderString + ',';
orderString = orderString + objects[no].id;
}
}
document.getElementById('debug').innerHTML = 'This is the new order of the images(IDs) : <br>' + orderString;
}
Hoe kan ik dit dmv AJAX in de database opslaan ??
Mijn DB tabel:
CREATE TABLE `klasse` (
`id` int(11) NOT NULL auto_increment,
`klasse` varchar(100) collate utf8_unicode_ci NOT NULL,
`volg_nr` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=34 ;
Edit::
Sorrie voor de bump, had 't niet door..
Edit2::
Heb dit (voor mij perfecte) script gevonden, bedankt voor het meedenken allen!
Gewijzigd op 01/01/1970 01:00:00 door /home/joost