problem with drag

problem with drag

HTML


<!DOCTYPE html>
<html>
<head>

  <title>Problem</title>
  <link rel="stylesheet" type="text/css" href="jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="style.css">

<head>
 <body>
 <div id="menu">
  <div class="intro">
 <div class:"numbers" >

  <div class="number">0</div>
  <div class="number">1</div>
  <div class="number">2</div>
  <div class="number">3</div>
  <div class="number">4</div>
  <div class="number">5</div>
  <div class="number">6</div>
  <div class="number">7</div>
  <div class="number">8</div>
  <div class="number">9</div>

 </div>
<div id="slider-range-min"></div>

 
<div id="slider-range"></div>
<button id="btn">Button</button>

<div class="brojic">ciao</div>
<div class="brojic2">ciao</div>

</div>
<div class="igra" style="display:none">



<div id="counter">0</div>

<div id="droppable">



</div>

</div>


</div>

  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
  <script src="game.js"></script>

 </body>
 </html>

CSS


body {

background-color: red;
}



.number {


display: inline-block;
width: 9.7%;
}

.brojic {

position: absolute;
padding-top: 20px;
display: none;
}

.brojic2 {

position: absolute;
padding-top: 20px;
display: none;
}

#btn {

margin-top: 30px;
}

.krug {

background-color: blue;
padding: 50px;
border-radius: 50%;
display: inline-block;
margin-left: 20px;

}

.igra {

width: 800px;
height: 500px;
background-color: green;
margin: 20px auto;
position: relative;

}

#droppable {

height: 100px;
width: 100px;
background-color: yellow;
color: green;
position: absolute;
bottom: 0;


}

.ui-state-default {

background-color: red !important;

}

.ui-slider-range {

background-color: blue !important;
}

#counter {

position: absolute;
right: 20px;
bottom: 20px;
}


JS


$(function() {
    $( "#slider-range-min" ).slider({
      range: "min",
      value: 3,
      min: 0,
      max: 9,
      slide: function( event, ui ) {
        $( "#amount" ).val( "" + ui.value );
      }
    });
    $( "#amount" ).val( "" + $( "#slider-range-min" ).slider( "value" ) );
  });

   $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1,
      max: 100,
      values: [ 20, 80 ],
      slide: function( event, ui ) {

      var kordinata1 = $(this).children('.ui-slider-handle').first().offset();
      var kordinata2 = $(this).children('.ui-slider-handle').last().offset();

      $(".brojic").css('top',kordinata1.top).css('left',kordinata1.left).show();
      $(".brojic2").css('top',kordinata2.top).css('left',kordinata2.left).show();

      $('.brojic').html(ui.values[0]);
        $('.brojic2').html(ui.values[1]);


        
      }
    });
    
  });

  $('#btn').click(function(){

    $('.igra').show();

    $('.intro').hide();

    var value = $("#slider-range-min").slider("option","value");
    var values = $("#slider-range").slider("option","values");

    var numbers= new Array();

      for (var i = 0; i < value; i++) {
        var num = Math.floor(Math.random() * (values[1] - values[0] + 1)) + values[0];
        

        while(jQuery.inArray( num, numbers ) != -1 ){

             num = Math.floor(Math.random() * (values[1] - values[0] + 1)) + values[0];


        }

        numbers.push(num);
      }


      for (var i = 0; i < value; i++) {

        $('.igra').append('<div class="krug">'+ numbers[i] +'</div>');
      }
     
      $(function() {
    $( ".krug" ).draggable({

      containment: "parent",
      revert: true
    });
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        ui.draggable.hide();
       var counter = Number($('#counter').text());

          $('#counter').text(counter + Number(ui.draggable.text()));






     }
    });
  });



  }  );