Déplacement de DIV en javascript
Bonjour,
Voilà, j'ai un petit soucis, j'ai une page HTML5, et dedans des DIV, dans ces DIV il y a une image, le format de chaque DIV ressemble à un polaroid.
J'ai ajouté onmousedown, onmouseup sur les DIV et onmousemove pour le document.
Quand je clique sur ma DIV, je peux, en maintenant le bouton appuyé, déplacer ma DIV pour la mettre autre part.
Voilà mon problème, quand je clique sur l'image qui est dans la div, plutôt que sur la zone vide, lorsque que je veux déplacer, mon curseur se transforme en sens interdit et ma DIV ne se déplace pas, si je relâche le bouton, ma DIV se ramène sous le pointeur d'un coup. Comme mon objet pointé est déterminé au onmousedown, je peux ensuite déplacer ma DIV sans avoir à cliquer, et si je clique sur l'image en relâchant, l'événement onmouseup supprime l'objet pointé et je récupère la main.
Bref, alors qu'il n'y a aucun événement défini sur l'image, pourquoi le comportement est-il différent en cliquant sur la DIV ou sur l'image qui est dedans, l'objet pointé étant toujours le même, ma DIV ?
Y a t il un moyen de corriger ?
Merci
Avec le code, c'est mieux (il faut que l'image existe, sinon pas de problème)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test photos</title>
<script type="text/javascript">
var xMousePos = 0; // Horizontal position of the mouse on the screen
var yMousePos = 0; // Vertical position of the mouse on the screen
var hasMoved = 0;
var movingObj = null;
var currentClass = null;
var objst = null;
var movX = movY = 0;
var pfx = ["webkit", "moz", "MS", "o", ""];
document.onmousemove = captureMousePosition;
// enlarge image
function enlarge(who) {
}
// get current mouse position and move object if set
function captureMousePosition(e) {
if (document.all) {
xMousePos = window.event.x+document.documentElement.scrollLeft;
yMousePos = window.event.y+document.documentElement.scrollTop;
} else if (document.getElementById) {
xMousePos = e.pageX;
yMousePos = e.pageY;
}
if (movingObj != null) {
if (movingObj.dragX != xMousePos || movingObj.dragY != yMousePos) {
currentClass = '.'+movingObj.id;
objst = css_getclass(currentClass);
if (objst.style)
objst = objst.style;
movX = (xMousePos - movingObj.dragX);
movY = (yMousePos - movingObj.dragY);
hasMoved += Math.abs(movX) + Math.abs(movY)
objst.top= (movingObj.offsetTop + movY) + 'px';
objst.left= (movingObj.offsetLeft + movX) +'px';
movingObj.dragX = xMousePos;
movingObj.dragY = yMousePos;
}
}
}
// click on DIV, register object and current pos
function mvtMouse(e) {
if (movingObj != null)
return;
movingObj = e;
movingObj.dragX = xMousePos;
movingObj.dragY = yMousePos;
}
// unclick on DIV, check if div moved
function stopMove(e) {
var tmp;
if (movingObj == null)
return;
movingObj.dragX = 0;
movingObj.dragY = 0;
tmp=movingObj;
movingObj = null;
if (hasMoved < 5)
enlarge(tmp);
hasMoved = 0;
}
// css rule set
function cssrules(){
var rules={}; var ds=document.styleSheets,dsl=ds.length;
for (var i=0;i<dsl;++i){
var dsi=ds[i].cssRules,dsil=dsi.length;
for (var j=0;j<dsil;++j) rules[dsi[j].selectorText]=dsi[j];
}
return rules;
};
// get the css rules of a class, so we can change it
function css_getclass(name){
var rules=cssrules();
if (!rules.hasOwnProperty(name)) return null;
return rules[name];
};
</script>
<style type="text/css">
html {
font-size: 100%;
height: 100%;
}
BODY {
position: relative;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0;
height: 100%;
background-color: #ffffff;
}
#master {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 100%;
overflow : hidden;
}
#images {
position: absolute;
width: 100%;
height: 100%;
}
.objet {
position: absolute;
background: #FFFFFF;
opacity: 1;
text-align: left;
transform-origin: 0 0;
cursor : pointer;
}
.objet h2, .objet p {
display: none;
}
.img10 {
width: 94px;
height: 70px;
top: 100px;
left: 550px;
padding : 4% 2% 25% 2%;
box-shadow : 5px 5px 3px 6px #444444;
z-index: 10;
}
</style>
</head>
<body bgcolor="#ffffff" text="#000000">
<div id="master">
<div id="images">
<div id="img10" class="objet img10" onmousedown="mvtMouse(this)" onmouseup="stopMove(this)">
<img src="images/artisan.jpg" width="90" height="50" />
<h2>Titre</h2>
<p>Bla bla bla bla bla bla</p>
</div>
</div>
</div>
</body>
</html> |
