可拖动总是捕捉到第一个 div

Question

我正在尝试构建一个简单的点击游戏，其中首要任务是库存。我从以前的（相当旧的线程）看过 this fiddle 我在哪里复制了 javascript。但问题是，我的可拖动 div 总是捕捉到清单中的第一个插槽。即使我将它们放在第二个插槽中。

所以我的问题是：为什么它会卡到第一个插槽？

这是我的代码：

$(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>

Answer 1

在您的 .slot class css 添加

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>

可拖动总是捕捉到第一个 div

Draggable always snaps to first div

html

css

jquery

droppable

draggable