php - 如何限制盒子中掉落元素的数量？-6ren

php - 如何限制盒子中掉落元素的数量？

转载作者：行者123 更新时间：2023-12-01 05:08:34

25

4

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

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

除了一些问题之外，我的工作正常。

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

这是我的演示(已删除)

感谢您的帮助。

========

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

demo2

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

最佳答案

这里是...

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

关于php - 如何限制盒子中掉落元素的数量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3679324/

25

4

0

文章推荐： window.getSelection() 函数的 jquery 替代函数

文章推荐： java - 如何让 MappingJacksonHttpMessageConverter 设置内容长度

文章推荐： Python 解析带有空格分隔子字段的 JSON 值

文章推荐： java - JDBC 上的 UnsupportedClassVersionError Java 教程

css - flex 盒子模型 - 显示 : flex, 盒子， flex 盒子？
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。今天我们中的许多人都知道 displa
Jquery super 盒子
$('.finalLink').html(" Click to Follow"); 我正在尝试创建一个以 super 框模式打开的链接。尝试了灯箱，结果相同。这些链接有效，但只是转到该网站。如果我静态
java - 盒子 2d 环境光如何工作？
我使用了 RayHandler.useDiffuseLight(true) ，现在无论我设置什么环境光值，屏幕上未照亮的部分都是黑色的。这是正常的吗？我见过其他用 libgdx 制作的应用程序，它同时
java - 堆叠方 block /盒子
我需要帮助解决一个简单的问题。我的任务即将结束，我们要制作不同的艺术人物。我制作了一个“正方形内的正方形”盒子，需要生成该盒子的 4 行和 4 列。我认为最好的解决方案是多一些 for 循环，但不能
jquery - 如何以这种方式 float 盒子？
我怎样才能实现this effect使用 CSS 和/或 jQuery？我会发布到目前为止我编写的代码，但它没有用...... 最佳答案使用jQuery Masonry或Isotope为了达成这个
python - 漂亮的打印(二维阵列，盒子)
我写了下面的代码: for row in range(len(listOfLists)): print('+' + '-+'*len(listOfLists)) print('|',
html - 底部和顶部 Angular 盒子
我想知道如何在 CSS3 中制作成 Angular 盒子。喜欢这个网站: http://themeluxe.com/themes/glissando/ (白人) 我怎样才能使边框看起来更好、更平滑。
css - 垂直居中的嵌套 flex 盒子
我正在尝试实现具有三个垂直部分的简单布局: 页面顶部的小标题。主要内容，必要时展开，以便页脚保留在页面底部。页面底部的页脚。主要内容部分应进一步分为两部分:一个带有输入框和按钮的非常小的表单，以
css - 盒子 Bootstrap 中的网格
我正在尝试构建如下图所示的网格 IMG 链接:http://postimg.org/image/qo3b4nof1/ 但我得到的 DIV E 几乎在 D-DIV 旁边这是我的代码
jquery - 定位 fancybox 盒子？
如何修改fancybox盒子的定位？我希望它被定位，以便它漂浮在我的容器 div 中... 感谢您的宝贵时间和帮助! 最佳答案 jquery.fancybox-1.2.6 的第 255 行有这段代码
CSS:如何在里面圆 Angular 盒子？
这个问题在这里已经有了答案: Inset border-radius with CSS3 (8 个答案) 关闭 9 年前。 border-radius 属性可以使盒子的 Angular 变圆。但是如
css - flex 盒子。元素未在同一高度对齐
我创建了一个包装器元素，其中包含 2 个彼此相邻的行内 block 框(图片中为浅绿色和黄色)。然后我创建了另外两个 div，它们都嵌套在其中一个内联 block 中以使内容居中。它可以工作，但由于某
盒子内的 CSS WordPress 盒子
我在使用 WordPress 时遇到问题，在盒子中嵌套盒子。在 WordPress 之外，这工作正常。我确定只有一两个参数有误。外框为dp23，内框为dp22由于某种原因，内框 (dp22) 之间存
html - 调整 flex 盒子
我目前尝试在容器内排列盒子的结果是这样的输出。但我想要实现的是，用最大数量的框填充每一行，但每个框都有固定的填充和边距。我相信我已经做到了。我需要每行中的单个框来覆盖剩余空间，间隙仅为 1 像素
html - 居中 Flex 盒子
我在下面有多个 flexbox 的代码。当页面展开时，我如何将它们垂直居中放置在页面中？我尝试在我的 flex-container 中使用 justify-content: center; 但当我使用
html - 如何使用 flex 盒子？
我有这样的布局: 我
html - 如何安装 flex 盒子？
我是编程新手，我注意到有人提到了 flex box。在阅读了很多相关内容之后，它似乎对我有用。唯一的问题是我在安装它时遇到了很多麻烦，即使在搜索了大约一个小时的帮助之后也是如此。我从 github 下
ubuntu - Ansible 无法提供 Vagrant 盒子
Vagrantfile有问题: # -*- mode: ruby -*- # vi: set ft=ruby : Vagrant.configure("2") do |config| config
Vagrant 盒子 : alternative download links
我正在尝试下载一个 Vagrant 的盒子，但他们的服务器此时非常缓慢。他们有公共(public)镜子吗？我想下载precision64.box 文件。谢谢最佳答案尝试更可靠的: Vagrant
javascript - 渲染底部div后如何让顶部div填充剩余高度？ (没有 flex 盒子)
在一个父容器内，三个 div 彼此重叠。顶部 div 是固定高度。底部 div 的内容占用了未知数量的垂直空间，但需要显示其中的所有内容。顶部 div 应填充剩余的垂直空间。每一个 // 100%

首页

博学

6Ren·AI

商城

php - 如何限制盒子中掉落元素的数量？