Home/ Questions/Q 1053687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T17:17:31+00:00

I am just learning jquery, so this might be something easy. I am trying

  • 0

I am just learning jquery, so this might be something easy.

I am trying to make a really 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.

  1. How do I limit the number of items to 1? (Is there a way to check if something is “dropped” onto the box?)

  2. 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
?>
    • 0