Drag and Drop JS met MySQL
Hoe is het mogelijk om het volgende te bereiken:
Je hebt een kaart met daarin bijv. 100 kleine vakjes.
Dan staat ernaast een vak met items die je bezit.
Hoe kun je nu die items in die kleine vakjes draggen en dan droppen en vervolgens in de database de coordinaten van dat vakje opslaan, en zo bij een F5 dat er nog steeds staat welke items er in het vak zitten en welke op de kaart?
Ik hoop dat iemand een voorbeeldje kan posten.
Lars
Gesponsorde koppelingen:
http://docs.jquery.com/UI/Draggable
http://jqueryui.com/demos/droppable/
http://api.jquery.com/jQuery.ajax/
Ik heb nu dit:
http://planemania.nl/overig/dragdrop/dragdrop.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
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
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable1 { width: 75px; height: 25px; padding: 10px; }
#draggable2 { width: 75px; height: 25px; padding: 10px; }
#draggable3 { width: 75px; height: 25px; padding: 10px; }
</style>
<script>
$(document).ready(function() {
$("#draggable1").draggable();
$("#draggable2").draggable();
$("#draggable3").draggable();
$(".droppable").droppable({
drop: function (event, ui) { alert('Het item is met succes verplaatst naar ' + this.id + '.');
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<table>
<tr>
<td>
<div id="draggable1"><img src="kruisboog.png" alt="Kruisboog" title="Kruisboog" /></div>
<div id="draggable2"><img src="zwaard.png" alt="Zwaard" title="Zwaard" /></div>
<div id="draggable3"><img src="scepter.png" alt="Scepter" title="Scepter" /></div>
</td>
<td>
<div style="height:150px; width:150px; background: gray;" id="je hand" class="droppable"><font size="+1" face="arial" color="white"> Plaats in je hand</font></div>
</td>
<td>
<div style="height:150px; width:150px; background: gray;" id="de bank" class="droppable"><font size="+1" face="arial" color="white"> Plaats in de bank</font></div>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable1 { width: 75px; height: 25px; padding: 10px; }
#draggable2 { width: 75px; height: 25px; padding: 10px; }
#draggable3 { width: 75px; height: 25px; padding: 10px; }
</style>
<script>
$(document).ready(function() {
$("#draggable1").draggable();
$("#draggable2").draggable();
$("#draggable3").draggable();
$(".droppable").droppable({
drop: function (event, ui) { alert('Het item is met succes verplaatst naar ' + this.id + '.');
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<table>
<tr>
<td>
<div id="draggable1"><img src="kruisboog.png" alt="Kruisboog" title="Kruisboog" /></div>
<div id="draggable2"><img src="zwaard.png" alt="Zwaard" title="Zwaard" /></div>
<div id="draggable3"><img src="scepter.png" alt="Scepter" title="Scepter" /></div>
</td>
<td>
<div style="height:150px; width:150px; background: gray;" id="je hand" class="droppable"><font size="+1" face="arial" color="white"> Plaats in je hand</font></div>
</td>
<td>
<div style="height:150px; width:150px; background: gray;" id="de bank" class="droppable"><font size="+1" face="arial" color="white"> Plaats in de bank</font></div>
</td>
</tr>
</table>
</body>
</html>
EDIT:
Het werkt nu gedeeltelijk, maar hoe kan ik dit stukje implanteren:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
En dat ie dan dus de draggable meestuurt (dus welke image) en het droppable veld.
Lars
Lars
Toevoeging op 20/11/2010 20:33:45:
Ik heb het helemaal zelf al opgelost ;)
Zie hier de goede versie:
http://planemania.nl/overig/dragdrop/dragdrop.php
Iedereen erg bedankt ;)
De code geef ik nog niet vrij, misschien later wel :).
Lars
Gewijzigd op 20/11/2010 15:31:15 door Lars Groot
