javascript - 拖动时定位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();
        });