<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 可拖动并检测位置。
我的问题是如何根据包含$('#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);
}
});
});
关于javascript - jQuery 根据包含位置偏移位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25444477/