javascript - 放置事件后 Div 中的 Jquery Droppable 中心图像

Question

嘿，我正在使用 jQuery droppable 创建一个简单的库存。现在，就像:

$(document).ready(function() {

 $( ".weapon, .helmet" ).draggable({ revert: "invalid", cursor: "move" });
 $( "#weapon_spot" ).droppable({accept: ".weapon"});
 $( "#helmet_spot" ).droppable({accept: ".helmet"});

 // make inventory slots droppable as well

 $( ".inv_slot" ).droppable({accept: ".weapon"});

}); 

我对 JQuery 有点陌生，在将图像设置为在某个 div 内对齐时遇到一些麻烦。一切(.weapon、.helmet 等)都是一个 div。它们里面可以有图像。 div 的尺寸为 70x70，图像也是该尺寸。

CSS 是这样的:

.inv_slot, #weapon_spot, #helmet_spot {
    width: 70px; 
    padding: 10px; 
    height: 70px; 
    margin: 10px; 
    border: 1px solid black; 
    float: left;
    text-align: center;
}

div 内的图像如下:

<div class='inv_slot'>
    <img class='weapon' src= "..." />
</div>

我的问题是，当我将图像拖放到另一个 div 时，它没有在 div 的中心对齐，它没有锁定，并且可以在其中移动。看来我可以使用 Drag.Move 以某种方式来做到这一点，但我找不到一些好的资源来解释这一点。能否请你帮忙 ？ :)

编辑:我在 http://jsfiddle.net/kzuRn/2/ 创建了一个演示

Answer 1

向 droppable 添加 drop 回调并应用必要的样式更改。因为现在该项目仍然是绝对定位的，所以它无法识别您的中心 CSS。

类似这样的内容:错误(见下文)

drop: function(ev, ui) {
        $(this).css({position: 'static'})
}

<小时/>

我更新了the fiddle 。我之前就错了。 this 是可放置的，ui.draggable 是可拖动的。

drop: function(ev, ui) {
    $(this).append(ui.draggable.css('position','static'))
}