ansaurus

Question

How do I limit the number of dropped items for a box?

Answer 1

+1 A:

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"&gt;&lt;/script&gt;
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"&gt;&lt;/script&gt;

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

Mark 2010-09-09 18:18:17

Oh cool. That works in firefox!! Looks like it's not working in IE. Umm... well, thanks for taking the time to figure it out. :)

Jared 2010-09-11 14:10:52

ansaurus

tags:

views:

answers:

How do I limit the number of dropped items for a box?

related questions