1

アップロードされた画像のサムネイルバージョンを、固定サイズのdivで画像をドラッグして作成できるようにする必要があります。画像の位置はデータベースに保存されます。

次のコードを使用すると、画像はドラッグ可能であり、含まれているdivの外側に配置されません。

私の問題は、最後のxと最後のyの位置が期待する数になっていないことです。画像が写真の左上隅を含むdivの左上隅に配置されている場合、xとyには0と0が必要です。現在、xは59を示し、yは51を示しています。したがって、xとyは現在、含まれているdivではなく、ページ上の位置に基づいています。

これは簡単な修正だと思いますが、今では数時間はわかりません。

$(document).ready(function() {
$("#drag").draggable({cursor: 'move',drag: function(){
        var position = $(this).position();
        var xPos = position.left;
        var yPos = position.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    },
    stop: function(){
        var finalPosition = $(this).position();
        var finalxPos = finalPosition.left;
        var finalyPos = finalPosition.top;

        $('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final Y: ' + finalyPos);
    }
}).bind('dragstop', function(e, ui) {
    if (ui.position.top > 0) {
        $(this).css('top', 0);
    }
    if (ui.position.left > 0) {
        $(this).css('left', 0);
    }

    var bottom = -($(this).height() - $(this).parent().height()),
    right  = -($(this).width() - $(this).parent().width());

    if (ui.position.top < bottom) {
        $(this).css('top', bottom);
    }
    if (ui.position.left < right) {
        $(this).css('left', right);
    }
});
});

これがHTMLです

<body>
<div id="container">
<div class="imageBox">
    <img id="drag" src="images/chicago.jpg">
</div>
</div>

<ul>
    <li id="posX"></li>
    <li id="posY"></li>
    <li id="finalX"></li>
    <li id="finalY"></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="js/imagePositioning.js"></script>

</body>
4

1 に答える 1

0

.offset（）は、コンテナではなく、ページに関連しています。.position（）を使用します。

.offset（）のマニュアルページ の関連ビットは次のとおりです。

.offset （）メソッドを使用すると、ドキュメントに対する要素の現在の位置を取得できます。これを[.position（）]（http://api.jquery.com/position/）と 比較してください。これは、オフセットされた親を基準にした現在の位置を取得します。

于 2012-06-21T19:23:44.247 に答える