Jquery Droppable Center Image in Div After Drop Event
<p>Hey there,i'm creating a simple inventory using jQuery droppable. For now, it's like :</p>

<pre><code>$(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"});

}); 
</code></pre>

<p>I'm kinda new to JQuery and have some trouble setting an image to be aligned inside a certain div. Everything(.weapon, .helmet etc) is a div. Inside them, there can be images. The divs are 70x70 and the images are of that size as well.</p>

<p>The css is like :</p>

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

<p>and the image inside a div is like :</p>

<pre><code>&lt;div class='inv_slot'&gt;
    &lt;img class='weapon' src= "..." /&gt;
&lt;/div&gt;
</code></pre>

<p>My problem is that when i drop an image to another div, it's not aligned in the center of the div, it's not locked and it can be moved inside it. It seems that i can use Drag.Move somehow to do that, but i can't find some good resource explaining that. Could you please help ? :) </p>

<p>EDIT : I have created a demo at <a href="http://jsfiddle.net/kzuRn/2/" rel="nofollow">http://jsfiddle.net/kzuRn/2/</a></p>
