Question

我在div中有一个可拖动图像的网站，脚本代码如下所示：

var offset = 0,
        xPos = 0,
        yPos = 0;

$(document).ready(function(){
    $(".item").draggable({
        containment: '#house_wall1',

        drag: function(){
            offset = $(this).position();
            xPos = offset.left;
            yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        },

        // Find original position of dragged image.
        start: function(event, ui) {
            // Show start dragged position of image.
            var Startpos = $(this).position();
            $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
        },

        // Find position where image is dropped.
        stop: function(event, ui) {
            // Show dropped position.
            var Stoppos = $(this).position();
            $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
        }
    });
});

我的问题是x和y值是从屏幕边缘指定的，而不是它们应该的div。因此，如果您的屏幕分辨率较低或者浏览器窗口较小，则x和y值将与分辨率较低的屏幕不同。

我发布了一个与之前类似的问题并且认为它已修复，但不幸的是它没有。我听说使用position()代替offset()应该可以胜任，但这仍然无法解决。也许是因为position()在这种情况下等于offset()？

提前致谢。

Answer 1

如果你想将div作为左边和上边的坐标原点。你必须设置位置样式属性。 div position =“relative”或div position absolute

Answer 2

抱歉，我忘了提到偏移属性也是相对于具有位置的下一个父级：相对或绝对，如果没有父级设置了位置属性，则IE的原点是客户端原点，mozilla所做的是怀疑我，我希望他们很快改变IE标准。您可以通过在document.body上放置一个边框并将div元素设置到文档正文并调用alert（divid.offsetLeft）来查看差异; IE和Mozilla会抛出不同的值。 Mozilla显示的值只包括主体边距而不是边框，如果你在mozilla中执行document.body.offset，它会显示一个减号???? .....在IE中为0

异常是表内部元素，如td和tr，对于它们，表是offsetParent

使用Javascript位置定位可拖动图像（）

2 个答案: