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圖像遮罩/定位

回答

相關問題