Déplacement de DIV en javascript

**keskidi** · 22/10/2013, 18h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**javatwister** · 23/10/2013, 09h24

salut,

Et le problème apparaît sous IE, je présume?

**keskidi** · 23/10/2013, 10h30

Pardon, non IE, c'est le truc que je fais en dernier, ça m’énerve trop de devoir gérer cette merde.
Je suis sous Firefox 24 pour le moment et je vois que ça fait pareil sous Chrome.

Invité · 23/10/2013, 10h47

bonjour

modifie la fonction mvtMouse de cette facon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function mvtMouse(e) {
 
    if (movingObj != null)
    	return;
 
 if (e.tagName=='IMG')
	movingObj = e.parentNode;
}
 
else{
 
movingObj = e
 
}
	movingObj.dragX = xMousePos;
	movingObj.dragY = yMousePos;
}

**javatwister** · 23/10/2013, 11h19

autre solution simple: ajoute dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.onmousedown=function(){return false}

**keskidi** · 23/10/2013, 11h32

@Mekal : ça ne change rien, l'objet déclencheur est toujours la DIV, jamais l'IMG de la DIV.

@javatwister : merci, ça marche impec !
T'expliques ?

Invité · 23/10/2013, 11h38

met une alert pour tester e.tagName

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert(e.tagName)

**keskidi** · 23/10/2013, 12h06

J'ai fait un trace, c'est toujours le DIV qui déclenche, même quand je clique sur l'image qui est dans le DIV.
La réponse de javatwister fonctionne bien, mais je ne comprend pas pourquoi. ça marche aussi en ajoutant onmousedown="return false;" sur la balise IMG, il y a donc un événement onmousedown par défaut sur les images qui fout la merde, mais je ne le vois pas dans firebug.

Edit : Le correctif fonctionne bien sous FF et CH mais bien entendu IE n'en a rien à foutre.
Edit2 : IE8 non, mais IE9 en veut bien.

**Bovino** · 23/10/2013, 14h29

Oui, les navigateurs permettent de copier les images d'un site par simple glisser déposer sur le bureau. Il s'agit donc d'inhiber ce comportement avec la solution proposée par javatwister ou en l'appliquant directement sur les images.

**keskidi** · 23/10/2013, 15h01

Ok, c'est juste que comme on ne le voit pas dans le DOM, fallait juste le savoir.
En fait, je n'ai jamais copié d'image comme ça.
Merci !

Déplacement de DIV en javascript

JavaScript

Discussions similaires

Partager

Partager