如何限制箱子丟棄的物品數量？

我只是在學習jquery，所以這可能很簡單。如何限制箱子丟棄的物品數量？

我想做一個非常基本的遊戲，你可以將顏色的名稱放到顏色框中（以幫助瞭解可拖放和可拖動）。

我得到它的工作，除了一些問題。

如何將項目數限制爲1？（有沒有辦法檢查是否有東西「丟棄」到盒子上？）
如何將數據發送到php腳本？

這裏是我的演示（刪除）

感謝您的幫助。

========

好吧，你在放入一個盒子後，我可以禁用投遞箱。但是，如果您決定改變您的想法，我需要重置。

demo2

如何重置顏色名稱回到原來的位置？

來源

2010-09-09 Jared

這...

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

來源

2010-09-09 18:18:17

那太酷了。這在Firefox中起作用！看起來它在IE中不起作用。呃...好吧，謝謝你花時間弄清楚。 :) – Jared 2010-09-11 14:10:52

如何限制箱子丟棄的物品數量？

回答

相關問題