当前位置： 文江博客话题详情

如何限制盒子中掉落物品的数量？

发布于 2024-09-18 01:58:40 字数 418 浏览 7 评论 0原文

我刚刚学习 jquery，所以这可能很简单。

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

除了一些问题之外我得到了它的工作。

  1. 如何将项目数量限制为 1？ （有没有办法检查是否有东西“掉落”到盒子上？）

  2. 如何将数据发送到 php 脚本？

这是我的演示（已删除）

感谢您的帮助。

========

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

demo2

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

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

爱格式化 2024-09-25 01:58:40

这里是...

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

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;
?>
回复 原文
~没有更多了~

关于作者

深巷少女

暂无简介

文章
评论
384 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Promise

文章 0 评论 0

qq_lbRlsh

文章 0 评论 0

待＂谢繁草

文章 0 评论 0

yy2010hell

文章 0 评论 0

漫无边际

文章 0 评论 0

傲娇萝莉攻

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文