Question

我们希望人们能够通过在固定大小的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>

Answer 1

.offset()相对于页面而不是容器。您想使用.position()。

以下是.offset()手册页中的相关位：

.offset()方法允许我们检索当前元素相对于文档的位置。与[.position（）]对比（http://api.jquery.com/position/），它检索当前位置 相对于偏移父级。

jQuery图像屏蔽/定位

1 个答案: