Draggable always snaps to first div

I am trying to build a simple point-and-click game where the first essential thing is an inventory. I have looked at this fiddle from a previous (rather old thread) Where I have copied the javascript. The problem is though, that my draggable divs always snaps to the first slot in the inventory. Even when I drop them in the second slot.

So my question is: Why is it snapping to the first slot?

Here is my code:

$(document).ready(function(){
 
  $('.item').draggable({containment: '#container', cursor: 'pointer'});

  $('.slot').droppable({
    drop: function(event, ui) {
      var $this = $(this);
      $this.append(ui.draggable);    

      var width = $this.width();
      var height = $this.height();
      var cntrLeft = width / 2 - ui.draggable.width() / 2;
      var cntrTop = height / 2 - ui.draggable.height() / 2;

      ui.draggable.css({
        left: cntrLeft + "px",
        top: cntrTop + "px"
      });
    }	
  });

});

body{
  margin:0;
  padding:0;
}
#container{
  position:relative;
  width:667px;
  height:375px;
  background-color:#999;
}

/* STYLE */
/* GENERAL ITEM SETTINGS */
.item{
  position:absolute;
}
/* ITEM IDs AND THEIR STYLING */
#key, #key2{
  width:20px;
  height:20px;
  cursor:pointer;
  z-index:10;
}
#key{
  background-color:gold;
  left:230px;
  top:100px;
}
#key2{
  background-color:gold;
  left:252px;
  top:100px;
}
#inventory{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  width:160px;
  height:50px;
  background-color:green;
  z-index:1;
}
.slot{
  float:left;
  border-left:1px solid #000;
  border-right:1px solid #000;
  width:78px;
  height:50px;
  z-index:2;
}

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>point-and-click-test</title>
    
    <link rel="stylesheet" href="style.css">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- jQuery UI -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    </head>
    
    <body>
    
    <div id="container">
            <div class="item" id="key"></div>
            <div class="item" id="key2"></div>
        
        	<div id="inventory">
            	<div class="slot"></div>
                <div class="slot"></div>
            </div>
        </div>
        
    </body>
    </html>

Solution

To your .slot class css add

position: relative;

$(document).ready(function(){
 
  $('.item').draggable({containment: '#container', cursor: 'pointer'});

  $('.slot').droppable({
    drop: function(event, ui) {
      var $this = $(this);
      $this.append(ui.draggable);    

      var width = $this.width();
      var height = $this.height();
      var cntrLeft = width / 2 - ui.draggable.width() / 2;
      var cntrTop = height / 2 - ui.draggable.height() / 2;

      ui.draggable.css({
        left: cntrLeft + "px",
        top: cntrTop + "px"
      });
    }	
  });

});

body{
  margin:0;
  padding:0;
}
#container{
  position:relative;
  width:667px;
  height:375px;
  background-color:#999;
}

/* STYLE */
/* GENERAL ITEM SETTINGS */
.item{
  position:absolute;
}
/* ITEM IDs AND THEIR STYLING */
#key, #key2{
  width:20px;
  height:20px;
  cursor:pointer;
  z-index:10;
}
#key{
  background-color:gold;
  left:230px;
  top:100px;
}
#key2{
  background-color:gold;
  left:252px;
  top:100px;
}
#inventory{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  width:160px;
  height:50px;
  background-color:green;
  z-index:1;
}
.slot{
  position: relative; /*here*/
  float:left;
  border-left:1px solid #000;
  border-right:1px solid #000;
  width:78px;
  height:50px;
  z-index:2;
}

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>point-and-click-test</title>
    
    <link rel="stylesheet" href="style.css">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- jQuery UI -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    </head>
    
    <body>
    
    <div id="container">
            <div class="item" id="key"></div>
            <div class="item" id="key2"></div>
        
        	<div id="inventory">
            	<div class="slot"></div>
                <div class="slot"></div>
            </div>
        </div>
        
    </body>
    </html>