2

私はこのフィドルを持っています: 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の中心に保ちたいということです。どうすればこれを達成できますか

4

2 に答える 2

3

それはあなたが探しているものですか？(それ以外の場合は、問題のより正確な説明を提供する必要があります!)

http://jsfiddle.net/u4CBW/

円の位置を正しく変更するには、値に +60 を追加するだけです。

$("#cirlce1").animate({ top: $(this).offset().top-60, left: $(this).offset().left-60 });
于 2013-06-15T08:33:43.037 に答える
1

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();
        });
于 2013-06-15T08:23:19.357 に答える