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

Question

I'm trying to set an the offset of an element. The code works ok in Chrome but i can't get the offset to change in 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();
}

If i run in chrome the first console.log is different from the second. If i run in IE it never changes. Thank you

Update 1 The offset function is the one from JQuery

Update 2 Added HTML and 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

Try using native javascript instead. Use obj.offsetLeft and obj.offsetTop. It should work in IE as well. Looks like a cross browser issue to me.