拖動時定位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();
        });