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 :
Et le code JS associe :Code:
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>
Je pense qu'il y a un conflit entre les evenements, mais je ne vois pas comment faire.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 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'; } } }
J'ai essaye en mettant disabled="true" sur les elements, mais, du coup, les evenements ne sont plus captures...
Une idee ?