如何限制一个盒子的掉落物品数量？答案

【问题标题】：How do I limit the number of dropped items for a box?如何限制一个盒子的掉落物品数量？
【发布时间】：2010-09-09 18:11:29
【问题描述】：

我只是在学习jquery，所以这可能很容易。

我正在尝试制作一个非常基本的游戏，您可以将颜色的名称拖放到颜色框上（以帮助了解可放置和可拖动）。

除了一些问题外，我都能正常工作。

如何将项目数限制为 1？（有没有办法检查是否有东西“掉”到盒子上？）
如何将数据发送到 php 脚本？

这是我的演示（已删除）

感谢您的帮助。

========

好的，我可以在您投递到邮箱后禁用投递箱。但是，如果你决定改变主意，我需要重新设置。

demo2

如何将颜色名称重置回原来的位置？

【问题讨论】：

标签： php jquery jquery-ui droppable

【解决方案1】：

在这里...

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

【讨论】：

太酷了。这适用于Firefox！看起来它在 IE 中不起作用。嗯...嗯，感谢您花时间弄清楚。 :)