How do I limit the number of dropped items for a box?
I am just learning jquery, so this might be something easy.
I am trying to make a r开发者_Python百科eally basic game that you can drop the name of the color onto the color box (to help learn about droppable and draggable).
I got it working except a few problems.
How do I limit the number of items to 1? (Is there a way to check if something is "dropped" onto the box?)
How do I send the data to a php script?
Here is my demo (removed)
Thanks for your help.
========
Ok, I can disable the drop boxes after you drop in into a box. But, if you decided to change you mind I need a reset.
demo2
How do I reset the color names back to the original location?
Here it is...
page.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Color Demo</title>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<style type="text/css">
#red { background-color: red; }
#green { background-color: green; }
#acceptbox1 { background-color: red; width: 150px; height: 170px; padding: 0.5em; float: left; margin: 10px; color: white; font-weight: bold; }
#acceptbox2 { background-color: green; width: 150px; height: 170px; padding: 0.5em; float: left; margin: 10px; color: white; font-weight: bold; }
.acceptboxes { width: 150px; height: 170px; padding: 0.5em; float: left; margin: 10px; color: white; font-weight: bold; }
.colorboxes { width: 100px; height: 20px; padding: 2px; float: left; margin: 2px; border: 2px solid black; cursor: pointer; background-color: white; }
</style>
<script type = "text/javascript">
$(function() {
var cnt = 0;
var c1;
var c2;
$("#submit, #reset").hide(0);
$(".colorboxes").draggable({ cursorAt: {cursor: 'move', top: 10, left: 56}, revert: 'invalid',snap: '.ui-widget-header', snapMode: 'inner'});
$("#reset").click(function(){
cnt=0;
resetboxes();
});
$("#acceptbox1").droppable({
drop: function(event, ui) {
$(this).droppable( "option", "disabled", true );
$(this).addClass('ui-state-highlight').find('p').html("Selected");
if (!$("#reset").is(":visible")){
$("#reset").show("blind");
}
c1 = ui.draggable.text()
cnt++;
checkdrop();
}
});
$("#acceptbox2").droppable({
drop: function(event, ui) {
$(this).droppable( "option", "disabled", true );
$(this).addClass('ui-state-highlight').find('p').html("Selected");
cnt++;
if (!$("#reset").is(":visible")){
$("#reset").show("blind");
}
c2 = ui.draggable.text()
checkdrop();
}
});
function checkdrop() {
if (cnt >= 2) {
$("#submit").show("blind");
cnt = 0;
}
else {
$("#submit").hide(0);
}
}
$("#submit").click(function(){
$.ajax({
url: "program.php",
type: "GET",
data: "color1="+c1+"&color2="+c2,
success: function(msg){
$("#results").html(msg);
}
});
});
});
function resetboxes() {
$("#submit, #reset").hide("blind");
$(".colorboxes").animate({
position: 'relative',
left: '0px',
top: '0px'
});
$("#acceptbox1").droppable( "option", "disabled", false ).addClass('ui-state-highlight').find('p').html("");
$("#acceptbox2").droppable( "option", "disabled", false ).addClass('ui-state-highlight').find('p').html("");
}
</script>
</head>
<body>
<table border="1">
<tr>
<td align="center">
<div id="acceptbox1">
<span style="display:none;height:100%;">Unavailable</span>
<p></p>
</div>
</td>
<td align="center">
<div id="acceptbox2">
<span style="display:none;height:100%;">Unavailable</span>
<p></p>
</div>
</td>
</tr>
</table>
<br /><br /><br />
<div id="colors3" class="colorboxes">
Red
</div>
<div id="colors4" class="colorboxes">
Green
</div>
<div id="colors5" class="colorboxes">
Blue
</div>
<div id="colors6" class="colorboxes">
Yellow
</div>
<br /><br /><br />
<div id="colors7" class="colorboxes">
Orange
</div>
<div id="colors8" class="colorboxes">
Purple
</div>
<div id="colors9" class="colorboxes">
Black
</div>
<div id="colors10" class="colorboxes">
Brown
</div>
<br /><br /><br />
<input type="hidden" value="" name="box1" />
<input type="hidden" value="" name="box2" />
<input id = "submit" type="submit" value="submit" /><br/>
<input id = "reset" type="button" value="reset" />
<div id = "results" style = "font-size: 3em;position: relative; top: -7em;left: 9em">
</div>
</body>
</html>
program.php
<?php
$color1 = $_GET["color1"];
$color2 = $_GET["color2"];
echo "Color 1: ".$color1.'<br/>'."Color 2:".$color2;
?>
加载中,请稍侯......
精彩评论