拖动时定位div

Question

我有这个小提琴： http : //jsfiddle.net/eDyHf/1/

$("#ninjaimage1").draggable({
    containment: "#cirlce1",
    stop: function (event, ui) {
        $("#cirlce1").animate({
            top: $(this).offset().top,
            left: $(this).offset().left
        });
    }
}); 

我的问题是，当我将图像拖动到div内时，我希望图像始终保持在div的中心，如何实现此目的

Answer 1

那是您要找的东西吗？ （否则，您必须提供有关您的问题的更准确的说明！）

http://jsfiddle.net/u4CBW/

只需在值上加上+60即可正确更改圆的位置：

$("#cirlce1").animate({ top: $(this).offset().top-60, left: $(this).offset().left-60 });

Answer 2

为什么不将两个div相互添加，而仅将拖动事件附加到外部（圆形）？ 那么它将始终停留在中心位置，而无需在javascript上花费很大精力，就像这样：

http://jsfiddle.net/2ebnz/

HTML：

<div id="field">
    <div id="cirlce1" class="circlle">
        <img id="ninjaimage1" class="Ninjaimg" src="http://www.boursematch.com/assets/images/avatar_default.gif"></img>
    </div>
</div>

CSS：

.Ninjaimg {
        position:relative;
        margin-top: 60px;
        margin-left: 60px;
        width:30px;
        height:30px;
        display:block;
        cursor:pointer;
        z-index:3000;
    }
    .circlle {
        position: absolute;
        width: 150px;
        height: 150px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border:1px solid black;
        position: absolute;
        z-index:1;
        display:block;
    }

JS：

 $(document).ready(function () {
            $("#cirlce1").draggable();
        });