我正在尝试设置元素的偏移量。该代码在 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>