Discussion :

[Invité]

Bonjour tout le monde,

J'ai créé un événement onmousemove sur une balise <li> pour remettre de façon dynamique l'ordre de la liste.
Cette partie fonction très bien.

Ce <li> possède son propre style, et à l'intérieur j'ai besoin d'y mettre un lien <a>

Le problème est que l'événement du onmousemove prends le dessus par rapport au lien qui semble cliquable, mais n'agit pas.
Si je clique sur le lien, c'est l'événement du onmousemove qui est pris en compte, et donc le lien ne marche pas

Quelqu'un aurai une idée pour solutionner mon problème ? jouer avec des styles ? ou un technique pour ne pas hériter le lien <a> du onmousemove dans le <li>

Merci

[SpaceFrog]

cancelBubble() et stopPropagation()

[Invité]

merci pour ta réponse ! mais je mets ça comment dans mon code

[Invité]

bon je vous send une partie du code en question parce que j'ai toujours pas trouvé la soluce à ce problème !

cancelBubble() et stopPropagation() m'aide pas beaucoup plus sans explication !

rappel de mon problème :
Le onmousemove me permet de changer les <li> de place, et met à jour automatiquement les input associés pour ensuite pouvoir récupérer par le post du formulaire le nouvel ordre. PS : ça fonctionne parfaitement

Le problème est que le lien que je place DANS la balise <li> hérite du onmousemove et je ne peux cliquer dessus, car il m'active bien sur l'évement mousemove, plutot que l'évenement du lien.

Pouvez-vous m'aider ! SVP


mapage.html

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
 
<script type="text/javascript" src="fonctionjs.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<form name="MonForm" method="post" action="#">
    <input type="submit" value="Valider">
        <ul class="liste">
            <li>
               <input class="ordre" type="text" name="id1" value="1" />
               <a href="MonLien1">Lien1</a>
            </li>
            <li>
               <input class="ordre" type="text" name="id2" value="2" />
               <a href="MonLien2">Lien2</a>
            </li>
            <li>
               <input class="ordre" type="text" name="id3" value="3" />
               <a href="MonLien3">Lien3</a>
            </li>
        </ul>
</form>

style.css

ul.liste
{
width: 90%;
padding: 0; margin: 0;
list-style: none;
}

ul.liste li
{
margin: 10px 10px 10px 10px;
border: 1px solid #222;
height: 35px;
list-style: none;
}

ul.liste input
{
width: 3em;
}

fonctionjs.js

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
154
155
156
157
158
159
function addEvent(obj,event,fct)
{
	if( obj.attachEvent)
		obj.attachEvent('on' + event,fct);
	else
		obj.addEventListener(event,fct,true);
}
 
//Connaître le vrai style d'un élément
function getCssStyleValue(element /*element html*/, style/*style recherché*/)
{
	if( element.currentStyle ) {
		return element.currentStyle[style];
	}
	else {
		return window.getComputedStyle(element,null).getPropertyValue(style);
	}
}
 
//Fonction "magique" pour ajouter une règle css:
function insertCss(selector,rule)
{
	if( document.styleSheets && document.styleSheets[0] ) {
		var feuille = document.styleSheets[0];
		if( feuille.insertRule )  //internet explorer
			feuille.insertRule(selector + " { " + rule + " } ", feuille.cssRules.length);
		else if( feuille.addRule )  //Pour firefox
			feuille.addRule(selector,rule);
	}
	else { //Pour le reste
		var ss = document.createElement('style');
		ss.setAttribute('type','text/css');
		ss.appendChild(document.createTextNode(selector + " { " + rule + " } ") );
		document.getElementsByTagName('head')[0].appendChild(ss);
	}
}
 
addEvent(
	window,'load', function () {
		insertCss('.ordre','display: none;');
		insertCss('ul.liste li', 'cursor: move;');
	}
);
 
var dragged = null; //balise li en cours de déplacement
var liste = null; //liste en cours de modification (balise ul)
 
var dX, dY; //Décalages
 
var ghost = document.createElement('li');
//Pour le différencier un peu des vraies "div"
ghost.style.backgroundColor = 'transparent';
ghost.style.borderStyle = 'dashed';
 
function list_onmousedown(event) {
	var target = event.target || event.srcElement;
 
	//Si il y a déjà un ul en déplacement, on "simule" un évènement onmouseup
	if( dragged ) list_onmouseup(event);
 
	//A la recherche d'une balise ul class="liste"
	var element = target;
	while(element)
	{
		if( element.className && element.className.match(/\bliste\b/) )
			break;
		element = element.parentNode;
	}
	if( element == null ) //si element = null, alors on n'a rien trouvé, on quite cette fonction
		return;
 
	liste = element;
 
	//Reste maintenant à trouver le "li" déplacé
	var element = target;
	while(element)
	{
		if( element == liste) //On est remonté jusqu'à la liste elle-même, cela signifie que l'on n'a pas cliqué sur une balise li
			return;
		else if ( element.tagName && element.tagName.toLowerCase() == 'li' )
			break;
		element = element.parentNode;
	}
	dragged = element;
 
	//On annule le comportement par défaut:
	event.returnValue = true;
	event.preventDefault && event.preventDefault();
 
	dX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
	dY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	var element = dragged;
	do {
		dX -= element.offsetLeft;
		dY -= element.offsetTop;
		element = element.offsetParent;
	} while( element && getCssStyleValue(element, 'position') != 'top');
 
 
	dragged.style.width = dragged.offsetWidth + 'px';
	dragged.style.height = dragged.offsetHeight + 'px';
 
	liste.insertBefore(ghost, dragged); //Insérer le fantôme juste avant l'élément en cours de déplacement
 
	//On simule un premier déplacement
	list_onmousemove(event);
}
 
function list_onmousemove(event) {
	if( dragged) {
		dragged.style.position = 'absolute';
		dragged.style.left = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft - dX + 'px';
		dragged.style.top = event.clientY + document.documentElement.scrollTop + document.body.scrollTop - dY + 'px';
 
		//Déplacement du ghost
		var avant = null; //La balise que l'on va utiliser pour insertBefore()
		//On va parcourir tous les enfants direct de notre liste
		for( var i = 0; i < liste.childNodes.length; i++)
		{
  		var el = liste.childNodes.item(i);
 
  		//Premièrement il faut s'assurer qu'il s'agit bien d'une balise (tagName) puis d'une balise li
  		//Ensuite, on exclut de nos tests la balise ghost elle-même ainsi que la balise en cours de déplacement
  		//Enfin, on vérifie les valeurs de offsetTop
  		if( el.tagName && el.tagName.toLowerCase() == 'li' && el != dragged && el != ghost && el.offsetTop + dY - el.offsetHeight/2 > dragged.offsetTop )
  		{
    		avant = el;
    		break; //On arrête la boucle
  		}
		}
		if( avant != ghost.nextSibling )  //Si ghost est avant "avant", alors "avant" est après ghost :p
		{
  		liste.removeChild(ghost);
  		if( avant == null )
    		liste.appendChild(ghost);
  		else
    		liste.insertBefore(ghost, avant);
		}
	}
}
 
function list_onmouseup(event)
{
	if( dragged) {
		dragged.style.position = dragged.style.width = dragged.style.height = '';
		liste.replaceChild(dragged, ghost);
		dragged = null;
		var inputs = liste.getElementsByTagName('input');
		var n = 1; //Compteur
		for(var i = 0; i < inputs.length; i++) {
			if( inputs.item(i).className.match(/\bordre\b/) ) {
				inputs.item(i).value = n++;
			}
		}
	}
}
addEvent(document,'mousedown',list_onmousedown);
addEvent(document,'mousemove',list_onmousemove);
addEvent(document,'mouseup',list_onmouseup);