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();
        });

拖动时定位div

2 个答案: