Lars Groot
20-11-2010 14:57
gewijzigd op 20-11-2010 15:31
Oké, bedankt.
Ik heb nu dit:
http://planemania.nl/overig/dragdrop/dragdrop.php
<!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>
EDIT:
Het werkt nu gedeeltelijk, maar hoe kan ik dit stukje implanteren:
$.ajax({
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
[size=xsmall]
Toevoeging op 20/11/2010 20:33:45: [/size]
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
Link gekopieerd
