Lançamentos de items

by edgardleal

HTML

<table border="1">
    <tr>
        <td>154</td>
        <td>154</td>
        <td>154</td>
        <td>154</td>        
    </tr>
    <tr>
        <td>154</td>
        <td>154</td>
        <td>154</td>
        <td>154</td>        
    </tr>
    <tr>
        <td>154</td>
        <td>154</td>
        <td>154</td>
        <td>154</td>        
    </tr>
    
</table>
<br><br>
    <button>Reiniciar</button>  <button>Enviar</button> <input />

CSS

td{
  width : 30px;
    height : 30px;
}

JavaScript

$("td").css("position" , "relative").click(function(){
    var self = $(this);
    var oldX = self.position().left;
    var oldY = self.position().top;
    var input = $("input");
   var x = input.position().left;
   var y = input.position().top;
    $(this).animate({left : x + "px", top : y + "px"},500, function(){
        $("input").val($('input').val() + ' ' + self.text());
        self.hide('explode', 500, function(){
           self.show().css({position : "static"}).text('');
        });
    });
});

$('td').each(function(index, ele){
   $(ele).text((Math.random() * 100 + '').substring(0,4));
});