1
我正在嘗試構建一個簡單的點擊式遊戲，其中第一個重要的事情是庫存。我看過this fiddle從以前（相當老的線程） 我在哪裏複製了JavaScript。問題是，我的可拖動的div始終與庫存中的第一個槽對齊。即使我把它們放在第二個槽中。Draggable總是捕捉到第一格
所以我的問題是：爲什麼它貼緊第一個插槽？
這裏是我的代碼：
$(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"
});
} \t
});
});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>
\t <div id="inventory">
\t <div class="slot"></div>
<div class="slot"></div>
</div>
</div>
</body>
</html>