Jquery Droppable中心圖像在Div事件後下降事件

嘿，我正在創建一個簡單的庫存使用jQuery droppable。現在，它就像：Jquery Droppable中心圖像在Div事件後下降事件

$(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。在他們裏面，可以有圖像。 divs是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/

來源

2011-01-19 Spyros

創建演示下降回調添加到droppables和應用樣式必要的修改。因爲現在這個項目仍然是絕對定位的，它不會識別你的中心CSS。

事情是這樣的：WRONG（見下文）

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

我更新the fiddle。我以前錯了。 this是droppable，並且ui.draggable是可拖動的。

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

來源

2011-01-19 19:45:12

嗯，我得到的效果是，當我拖放可拖動的項目（圖像）到droppable時，可拖動的div稍微向上移動。然而，div內的圖像仍在移動。我添加了更多的代碼，以便您查看更容易。 Thanx任何幫助:) – Spyros 2011-01-19 20:01:00

Jquery Droppable中心圖像在Div事件後下降事件

回答

相關問題