Comment limiter le nombre d'éléments perdus pour une boîte?

Je suis en train d'apprendre jquery, donc ça pourrait être quelque chose de facile.Comment limiter le nombre d'éléments perdus pour une boîte?

Je suis en train de faire un jeu vraiment de base que vous pouvez laisser tomber le nom de la couleur sur la boîte de couleur (pour aider à en apprendre davantage sur largable et draggable).

Je l'ai eu fonctionnant excepté quelques problèmes.

Comment limiter le nombre d'éléments à 1? (Y at-il un moyen de vérifier si quelque chose est « tombé » sur la boîte?)
Comment puis-je envoyer les données à un script php?

Voici ma démo (enlevé)

Merci pour votre aide.

========

Ok, je peux désactiver les boîtes de dépôt après que vous déposez dans dans une boîte. Mais, si vous avez décidé de changer d'avis, j'ai besoin d'une réinitialisation.

demo2

Comment réinitialiser les noms de couleur à l'emplacement d'origine?

Source

2010-09-09 Jared

Ici, il est ...

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

Source

2010-09-09 18:18:17

Oh cool. Cela fonctionne dans firefox !! On dirait que ça ne marche pas dans IE. Euh ... eh bien, merci d'avoir pris le temps de le comprendre. :) – Jared

Comment limiter le nombre d'éléments perdus pour une boîte?

Répondre

Questions connexes