[英]jQuery offset position according containment position
<script>
$(document).ready(function(e) {
$(function(){
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
});
</script>
<style>
body{margin:0;}
#draggable{width:100px; height:100px; background:red;}
#box{width:500px; height:500px; border:solid 1px #000; margin:100px;}
</style>
<div id="box">
<div id="draggable"></div>
</div>
<input id="posX" type="text" />
<input id="posY" type="text" />
我有一個div使用jQuery draggable並檢測位置。
我的問題是如何根據包含$('#box')
獲取偏移位置,而不是根據文檔?
由於可拖動元素附加到正文,因此在拖動時它根本不在#box
元素內部,因此您必須減去包含元素的位置,並且在您的情況下也必須減去邊框,以獲得正確的值
$(function(){
var box = $('#box').offset(),
border = parseInt($('#box').css('border-width').replace(/\D/g,''), 10);
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left - box.left - border;
var yPos = offset.top - box.top - border;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.