Discussion :

[messier79]

Bonjour

Voila mon probleme : j'ai un conteneur principal (div) avec un certain nombre d'elements a l'interieur (span, input, button...) que je souhaiterais pouvoir positionner avec mon curseur.
Pour faire cela, j'ai definis un evenement onmouseover sur mon conteneur.
Dans un input hidden, je stocke l'id de l'element a deplacer lorsque je clique dessus.
Cela marche pour les spans, mais pas pour les inputs.
Voici un extrait du code :

Code :

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

1
2
3
4
5
6
7
8
 
<input type="text" id="moved_input" value="" />
 
...
 
<div id="divContainer" class="container vertical" style="position:relative;z-index:1000" onmouseover="moveComponent(event)">
    <input type="text" name="text" id="text" value="" onmouseover="selectInput(this.id)" onmousedown="selectMoveComponent(this.id)" onmouseup="unselectMoveComponent()" />
</div>

Et le code JS associe :

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
 
function selectMoveComponent(id){
	var elt = document.getElementById(id);
	document.getElementById('moved_input').value = id;
}
 
function unselectMoveComponent(){
	document.getElementById('moved_input').value = '';
}
 
function moveComponent(e){
	var cursor = getPosition(e);
	var container = getElementPosition('divContainer');
	var left = cursor.x - container.x;
	var top = cursor.y - container.y;
 
	if(document.getElementById('moved_input').value != ''){
		var movedComponent = document.getElementById('moved_input').value;
 
		if(movedComponent != 'undefined'){
			var elt = document.getElementById(movedComponent);
 
			elt.style.left = left + 'px';
			elt.style.top = top + 'px';
		}
	}
}

Je pense qu'il y a un conflit entre les evenements, mais je ne vois pas comment faire.
J'ai essaye en mettant disabled="true" sur les elements, mais, du coup, les evenements ne sont plus captures...

Une idee ?

[RomainVALERI]

Une question en passant : est-il normal que ta fonction moveComponent soit appelée sur onmouseover plutot que onmousemove ?

[E.Bzz]

Bonjour,
tu as de la chance : un nouvel article vient de sortir, qui traite notamment du problème que tu rencontres (la propagation des évènements dans l'arborescence DOM)

A+

[messier79]

Merci, je vais regarder.
Pour repondre a RomainVALERI, oui, c'est ce que je veux. Il faut que ce soit le conteneur principal qui recupere l'evenement onmousemove.
Mais, par contre, je me suis rendu compte d'un truc, c'est que le onmousemove dans l'input devrait etre un onmouseover.
Je vais regarder l'article et essayer de trouver une solution.