我想问一下,我的这段拖动div的代码什么地方有问题啊,在ie里面正常,在ff下就是停下再拖就不行了,但如果在div中加入文本就可以了,为什么会这样啊?请各位高手指教.
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1
<
html
>
2
3 < head >
4 < script language = " JavaScript " type = " text/javascript " src = " jquery-1.6.4.js " ></ script >
5 < style >
6
7 </ style >
8 </ head >
9 < body >< head >
10 < script language = " JavaScript " type = " text/javascript " src = " jquery-1.6.4.js " ></ script >
11 < style >
12
13 </ style >
14 </ head >
15
16
17 < div id = " rect " style = " width:200px;height:200px;position:absolute;background-color:pink; " >
18
19 </ div >
20
21 < div id = " display " style = " position:absolute;top:300px; " ></ div >
22 </ body >
23 </ html >
24
25 < script >
26
27 $(init);
28
29 function init() {
30rectEvent();
31}
32
33 function rectEvent() {
34var slider = $("#rect");
35var downFlag = false;
36
37var offX;
38
39slider.mousedown(function(e){
40downFlag = true;
41var event = getEvent(e);
42offX = getOffsetX(event);
43
44});
45
46slider.mouseup(function(){
47downFlag = false;
48});
49
50slider.mouseout(function(){
51downFlag = false;
52});
53
54slider.mousemove(function(e){
55var event = getEvent(e);
56
57if(!downFlag){
58return false;
59}
60
61var left = event.clientX - offX;
62$("#display").text(left);
63slider.css("left",left);
64});
65
66}
67
68
69 function getEvent(event) {
70var event = event ? event : window.event;
71return event;
72}
73
74 function getOffsetX(event) {
75var off_X = event.offsetX ? event.offsetX : event.layerX;
76return off_X;
77}
78
79 </ script >
80
2
3 < head >
4 < script language = " JavaScript " type = " text/javascript " src = " jquery-1.6.4.js " ></ script >
5 < style >
6
7 </ style >
8 </ head >
9 < body >< head >
10 < script language = " JavaScript " type = " text/javascript " src = " jquery-1.6.4.js " ></ script >
11 < style >
12
13 </ style >
14 </ head >
15
16
17 < div id = " rect " style = " width:200px;height:200px;position:absolute;background-color:pink; " >
18
19 </ div >
20
21 < div id = " display " style = " position:absolute;top:300px; " ></ div >
22 </ body >
23 </ html >
24
25 < script >
26
27 $(init);
28
29 function init() {
30rectEvent();
31}
32
33 function rectEvent() {
34var slider = $("#rect");
35var downFlag = false;
36
37var offX;
38
39slider.mousedown(function(e){
40downFlag = true;
41var event = getEvent(e);
42offX = getOffsetX(event);
43
44});
45
46slider.mouseup(function(){
47downFlag = false;
48});
49
50slider.mouseout(function(){
51downFlag = false;
52});
53
54slider.mousemove(function(e){
55var event = getEvent(e);
56
57if(!downFlag){
58return false;
59}
60
61var left = event.clientX - offX;
62$("#display").text(left);
63slider.css("left",left);
64});
65
66}
67
68
69 function getEvent(event) {
70var event = event ? event : window.event;
71return event;
72}
73
74 function getOffsetX(event) {
75var off_X = event.offsetX ? event.offsetX : event.layerX;
76return off_X;
77}
78
79 </ script >
80
如果我在rect div随便加入文本如: < div id = " rect " style = " width:200px;height:200px;position:absolute;background-color:pink; " >11</div>,这样就可以了,我一直不太明白为什么会这样?请名位大侠指教.