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

向droppables添加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'))
}

在Div After Drop事件中的Jquery Droppable中心图像

1 个答案: