javascript - 无法在 Internet Explorer 10 中使用 JQuery 更新 Offset

Question

我正在尝试设置元素的偏移量。该代码在 Chrome 中工作正常，但我无法在 IE 中更改偏移量；

this.moveH = function (e) {

    if (this.target != null){
        console.log(this.target.offset())
        this.target.offset({
            left: e.pageX - this.target.outerWidth(true) / 2,
            top: e.pageY - this.target.outerHeight(true) / 2
        });
    }
    console.log(this.target.offset())
    e.preventDefault();
}

如果我在 chrome 中运行，第一个 console.log 与第二个不同。如果我在 IE 中运行它永远不会改变。谢谢

更新 1偏移函数是来自 JQuery 的函数

更新 2 添加了 HTML 和 CSS

*{
    margin:0px;
    left:0px;
    right:0px;
}
#applet {
    position: absolute;
    width: 700px;
    height: 520px;
    direction:ltr;
    text-align: center;
}
#puzzle{
    top:80px;
    left:20px;
    position:absolute;
}

.left-column{
    position:absolute;
    width:388px;
}

.left-puzzle{
    margin-top:10px;
    width:388px;
    background-image:url("../images/left_puzzle.png");
    height:83px;
}
.left-puzzle p{
    margin-right:194px;
}

.right-column{
    float:right;
    left:500px;
    width:182px;
    margin-right:10px;
}
.targets{
    left:206px;
    top:1px;
    width:194px;
    position:absolute;
}
.target{
    margin-top:10px;
    width:194px;
    height:83px;
}
.right-puzzle{
    margin-top:10px;
    width:182px;
    height:82px;
    background-image:url("../images/right_puzzle.png")
}

#bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div id='applet'>
            <img id='bg' src='images/background.jpg' />
            <div id="puzzle">

                <div class="left-column">

                    <div class="left-puzzle">
                        <p>يبدأ خلف الشرج ولدى بعض الحبليات ذيل يوجد في مرحلة الجنين فقط.</p>
                    </div>

                    <div class="left-puzzle">
                        <p>يمتد بطول الظهر وهو مليء بالسائل عند الفقاريات ويطلق عليه اسم الحبل الشوكي .</p>
                    </div>

                    <div class="left-puzzle">
                        <p>تتطور إلى خياشيم أو إلى أجزاء أخرى من الجسم أثناء تطور الجنين .</p>
                    </div>

                    <div class="left-puzzle">
                        <p>قضيب صلب لكنه مرن يدعم الجسم وفي الفقاريات يحل محله عمود فقري .</p>
                    </div>
                </div>
                <div class="targets">
                    <div class="target drop" id="t1"></div>
                    <div class="target drop" id="t2"></div>
                    <div class="target drop" id="t3"></div>
                    <div class="target drop" id="t4"></div>
                </div>
                <div class="right-column">
                    <div id="d1" class="right-puzzle drag" data-target-id="t2">
                        <p>الحبل العصبي المجوف</p>
                    </div>
                    <div id="d2" class="right-puzzle drag" data-target-id="t1">
                        <p>الذيل</p>
                    </div>
                    <div id="d3" class="right-puzzle drag" data-target-id="t3">
                        <p>الجيوب البلعومية </p>
                    </div>
                    <div id="d4" class="right-puzzle drag" data-target-id="t4">
                        <p>الحبل الظهري</p>
                    </div>
                </div>
            </div>
        </div>

Answer 1

请尝试改用 native javascript。使用 obj.offsetLeft 和 obj.offsetTop。它也应该在 IE 中工作。对我来说看起来像是一个跨浏览器问题。