javascript - jQuery 根据包含位置偏移位置

标签 javascript jquery

<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);
        }
    });
});

FIDDLE

关于javascript - jQuery 根据包含位置偏移位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25444477/

相关文章:

javascript - 不可变js : Transform a List to a Map

javascript - 在执行之前处理外部 javascript 脚本加载事件

jquery - Accordion 菜单,第一次单击时展开,如果子菜单展开则转到 URL

javascript - 如何使用 jQuery Ajax 指定正确的输入以提交多个表单(可变数字)

jquery - 如何使用 jQuery 为元素添加动画效果?

javascript - CQ/AEM 'cq5forms_showMgs()' 这样的函数在哪里定义的?

Javascript JQuery 链接

加载后Javascript进度条清除值

javascript - jQuery - 获取最接近的文本框的值并将其分配给变量

javascript - 在 jquery 中显示数组中的元素