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/) 进行对比，后者检索 相对于偏移量 parent的当前位置。

于 2012-06-21T19:23:44.247 回答