jQuery图像遮罩/定位

我们希望人们能够通过以固定大小的div拖动图像来创建上传图像的缩略图版本。图像位置将被保存在数据库中。jQuery图像遮罩/定位

使用下面的代码，图像是可拖动的，不会将其自身放置在包含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>

来源

2012-06-21 Rich Coy

Rich：从'.imageBox'中删除边距，你很好走（设置为'margin：0;'）。数字变得准确。 –

.offset()是相对的，而不是容器。你想使用.position()。

下面是来自.offset()手册的相关位：

的.offset()方法允许我们以获取相对于文档元素当前位置。将其与[.position（）] （http://api.jquery.com/position/）进行对比，其检索相对于抵消父母的当前位置。

来源

2012-06-21 19:23:44

感谢您的输入。我更新了上面的js来使用.position（），但得到相同的结果。 –

@Rich Coy - 你能设置一个[jsfiddle]（http://jsfiddle.net/）吗？ –

http://jsfiddle.net/richcoy/Lnr8P/1/ –

jQuery图像遮罩/定位

回答

相关问题