IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ordonner un tableau (ok sous FF, rien sous ie)


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Inscrit en
    Mai 2009
    Messages
    8
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 8
    Par défaut Ordonner un tableau (ok sous FF, rien sous ie)
    Bonjour,

    voici un code que j'ai écrit afin d'ordonnancer un tableau. j'ai épuré au max le code qui est normalement plein de css et s'adapte dynamiquement au tableau.
    il fonctionne sous FF mais je n'ai aucun résultat sous ie.
    après de nombreux essais, j'en suis venu à la conclusion que mon problème provient de document.onmousedown=drag; et de la fonction drag (c'est pourquoi j'ai créé la fonction action_down_img() pour les tests). (sous ie il faudra aussi que j'ajoute une ligne vide inactive en fin de tbody)

    ce code est bien sur libre d'utilisation et je peux fournir toute la partie dynamique php, css et les fonctions js qui adaptent ce code pour n'importe quel tableau.

    merci d'avance de votre aide pour l'adaptation sur ie.

    la page est http://gaia-mundi.net/essai_ordre.html et voici le code :

    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
    <html>
    <head>
    <script language="JavaScript">
    //###ORDONNANCEMENT DU TABLEAU
    var corps_menu;var tr_index;var deplcmt;var y_clic;
     
    function deplacerTR(w){//enregistre la position du curseur
    	y_souris = (navigator.appName.substring(0,3) == "Net") ? w.pageY : event.y+document.body.scrollTop;
    	return false;
    	}
     
    function indexRow_select(elmt){//trouver l'index du TR à partir de l'image move
    	var elmt_parent = elmt.parentNode;
    	while(elmt_parent.tagName!='TR') elmt_parent = elmt_parent.parentNode;
    	var id_tr = elmt_parent.rowIndex ;
    	return id_tr;
    	}
     
    function inserer(indexA){var a=5;
    	if(y_souris<y_clic){//monter
    		corps_menu.insertBefore(corps_menu.rows[tr_index],corps_menu.rows[indexA-1]);
    		y_clic=parseInt(y_souris-5);tr_index=indexA-1;
    		}else if(y_souris>y_clic){//descendre
    			corps_menu.insertBefore(corps_menu.rows[tr_index],corps_menu.rows[indexA]);//tr_index+2
    			tr_index=indexA-1;y_clic=parseInt(y_souris)+a;
    			}
    	}
     
    function drag(){//DEBUT
    	if(deplcmt=='on'){//actions lors du clic
    		document.onmouseup= drop;
    		return false;
    		}
    	}
     
    function action_down_img(){//à faire lors du drag
    	y_clic=y_souris;
    	var tds=corps_menu.getElementsByTagName("TD");//actions sur les TD pendant le déplacement
    	for(i=0 ; i<tds.length ; i++){
    		tds[i].onmouseover = function(){inserer(indexRow_select(this));};
    		}
    	document.body.style.cursor = 'move';//curseur de déplacement
    	var tds=corps_menu.rows[tr_index].getElementsByTagName("TD");
    	for(i=0 ; i<tds.length ; i++){
    		tds[i].onmouseover = function(){};
    		}
    	return false;
    	}
     
    function drop(){//FIN
    	deplcmt='off';
    	var tds=corps_menu.getElementsByTagName("TD");//effacer les actions des TD après déplacement
    	for(i=0 ; i<tds.length ; i++){
    		tds[i].onmouseover = function(){};
    		}
    	document.body.style.cursor = '';
    	document.onmouseup = null;
    	}
     
    document.onmousemove = deplacerTR;
    document.onmousedown = drag;
    </script>
    </head>
    <body onload="corps_menu=document.getElementById('corps_menu');y_clic=0;tr_index=null;deplcmt='off';">
     
    <table id="table_menu" border="0" cellpadding="0" cellspacing="0">
    	<thead>
    		<tr>
    			<td>N°</td>
    			<td>Noms</td>
    			<td>Actions</td>
    		</tr>
    	</thead>
    	<tbody id="corps_menu">
    		<tr>
    			<td >1. </td>
    			<td>1ère rubrique</td>
    			<td>
    				<img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png">
    			</td>
    		</tr>
    		<tr>
    			<td>2. </td>
    			<td>2ème rubrique</td>
    			<td><img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png"></td>
    		</tr>
    		<tr>
    			<td>3. </td>
    			<td>3ème rubrique</td>
    			<td><img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png"></td>
    		</tr>
    		<tr>
    			<td>4. </td>
    			<td>4ème rubrique</td>
    			<td><img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png"></td>
    		</tr>
    	</tbody>
    </table>
     
    </body>
    </html>

  2. #2
    Membre du Club
    Inscrit en
    Mai 2009
    Messages
    8
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 8
    Par défaut infos plus
    j'ai encore testé d'autres solutions et peut être que cette information peut aider à comprendre la différence FF ie :
    lorsque je mets une alerte dans la fonction drag
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function drag(){
    alert('ok');
    ....
    bien sur, le onmousedown et le onmouseup sont perturbé mais sous ie après l'alerte la ligne se déplace... dans cette optique j'ai tenté des setimeout pour reproduire l'alerte mais rien à faire...

    si vous avez la moindre idée, je suis preneur et je l'essayerais de suite. surtout que j'ai un script qui découle de celui ci (et qui fonctionne sous ff) dont l'objet est de déplacer des lignes entres plusieurs tableaux.

    merci

  3. #3
    Membre du Club
    Inscrit en
    Mai 2009
    Messages
    8
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 8
    Par défaut
    pour aider ceux qui voudraient m'aider ;-)

    je pense que le pb provient de cette différence entre ie et ff
    http://fr.wikibooks.org/wiki/Program...ript/Evenement

    j'ai tenté de reproduire ceci mais pas d'amélioration
    http://www.pasteur.fr/~llafitte/Docs...ipt/event.html

    ce qui est dommage, dans cet exemple, on a ie et ff bien séparé mais sur mon script toujours pas d'effet. mais je pense que c'est dans cette voie que la réponse se trouve !!!
    http://www.devparadise.com/technoweb...cript/a305.php


    qu'en pensez vous ?

  4. #4
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    voici un vieux truc que j'avais codé je pense qu'il te sera utile

    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
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
     
    var classMove = "drag";
    var init = false;
    var MyTable = "";
    var divTempToMove = "";
    var movable = false;
    var trTemp ="";
    var myObjectClick = null;
    var positionYAtClick = 0;
    var direction = false;
    //Fonction permettant d'initialiser les listeners
    function init_evenement(){
    //On commence par affecter une fonction � chaque �v�nement de la souris
    if(window.attachEvent){
    	document.onmousedown = start;
    	document.onmousemove = drag;
    	document.onmouseup = drop;
    }
    else{
    	document.addEventListener("mousedown",start, false);
    	document.addEventListener("mousemove",drag, false);
    	document.addEventListener("mouseup",drop, false);
    }
     
     
     
    }
     
    //Fonction permettant de r�cup�rer l'objet sur lequel on a click�, et l'on r�cup�re sa classe
    function start(e){
    	//On initialise l'�v�nement s'il n'a aps �t� cr�� ( sous ie )
    	if(!e){
    		e = window.event;
    	}
    	//D�tection de l'�l�ment sur lequel on a click�
    	monElement = (e.target)? e.target:e.srcElement;
    	//alert(monElement.nodeName);
    	if(monElement)
    	{
    		//On appel la fonction permettant de savoir si les lignes / colonnes du tableau sont d�pla�able
    		getClassDrag(monElement);
    		if(myObjectClick != null){
    			myObjectClick.style.cursor = "move";
    			monElement.focus();
    			positionYAtClick = e.clientY;
    		}
    	}
    	return false;
    }
     
     
    //Fonction permettant de d�placer la ligne
    function drag(e){
    	//On initialise l'�v�nement s'il n'a aps �t� cr�� ( sous ie )
    	if(!e){
    		e = window.event;
    	}
     
    	//Si l'objet est d�pla�able et qu'il existe
    	if(movable && myObjectClick){
     
    		trTemp = (e.target)? trouveLigneParente(e.target):trouveLigneParente(e.srcElement);
    		if(trTemp != null){
    			if(myObjectClick != trTemp){
    				document.getElementById('survol').value = trTemp.id
    				myObjectClick.focus();
    				//On v�rifit si on monte ou on descend :
    				var pixelEnCours = e.clientY ;
    				if(pixelEnCours > positionYAtClick){
    					direction = true;
    					positionYAtClick = pixelEnCours;
    				}
    				else{
    					direction = false;
    					positionYAtClick = pixelEnCours;
    				}
     
    				reverseLine(myObjectClick,trTemp);
    			}
    			//document.getElementById('survol').value = trTemp.id;
    		}
    		//On d�sactive la s�lection pendant le drag and drop
    		//divTempToMove.focus();
    		//document.getElementById('conteneur').style.MozUserSelect ="none";
     
    	}
    	return false;
    }
     
    function drop(){
    		if(myObjectClick != null){
    			myObjectClick.style.cursor = "auto";
    			//myObjectClick.style.backgroundColor = "#ffffff;";
    		}
     
    	myObjectClick = null;
    	trTemp = null;
    	movable = false;
    	positionXAtClick = null;
    	positionYAtClick = null;
    	positionXMyobjectClick = null;
    	positionYMyobjectClick = null;	
     
    	return false;
    }
     
    function getClassDrag(myObject){
    	//On recherche la balise table
    	MyTable = trouveTableauParent(myObject);
    	if(MyTable){
    	with(MyTable){
    		var x = className;
    		listeClass = x.split(" ");
    		//On parcours le tableau pour voir si l'objet est d�pla�able
    		for(var i = 0 , l = listeClass.length; i < l ; i++){
    			if(listeClass[i] == classMove){
    				movable = true;
    				//On r�cup�re la ligne associ�
    				myObjectClick = trouveLigneParente(myObject);
    				break;
    			}
    		}
    	}
    	}
    }
     
    function trouveLigneParente(MonElement){
    	var Parent = MonElement.parentNode ;
    	if(Parent && Parent.tagName != "TR"){
    		temp = trouveLigneParente(Parent);
    	}
    	else{
    		temp = Parent;
    	}
    	return temp;
    }
     
    function trouveTableauParent(MonElement){
    	var Parent = MonElement.parentNode ;
    	if(Parent && Parent.tagName != "TABLE"){
    		temp = trouveTableauParent(Parent);
    	}
    	else{
    		temp = Parent;
    	}
    	return temp;
    }
     
     
    function debug(){
     
    	if(!init){
    		init = true;
    	}
    	else{
    		document.getElementById('prochaine').value = myObjectClick.id;
    		Line1 = document.getElementById(document.getElementById('enCours').value);
    		Line2 = document.getElementById(document.getElementById('prochaine').value);
     
    		reverseLine(Line1,Line2);
    		init = false;
    	}
    }
     
    function reverseLine(Line1,Line2){
    		//Copie de la ligne d'origine en m�moire
    		var lineTemp = Line1.cloneNode(true);
    		lineTemp.backgroundColor = "#fff000;";
    		var MyBody = MyTable.getElementsByTagName('tbody')[0];
     
    		//On ajoute APRES le noeud
    		//On v�rifit si le deuxiemme noeud est le premier ou le dernier
    		if(direction){
    			try{
    				MyBody.insertBefore(lineTemp,Line2.nextSibling);
    			}
    			catch(e){
    				alert(e +"\n" +e.message);
    			}			
    		}
    		else{
    			try{
    				MyBody.insertBefore(lineTemp,Line2.previousSibling);
    			}
    			catch(e){
    				alert(e +"\n" +e.message);
    			}
    		}
    		//et on d�truit le noeud d'origine
    		myObjectClick = lineTemp;
    		MyBody.removeChild(Line1);
     
    }
     
    function getNoeudBefore(ObjetToSearch){
    		//On utilise la variable globale MyTable d�clar�e au moment du click
    		var listTR = MyTable.getElementsByTagName('tr');
    		for(var i = 0 ,l = listTR.length; i < l ; i++){
    			if(listTR[i] == ObjetToSearch){
    				return i;
    				break;
    			}
    		}
    }
     
    function createDivTemp(objToInsert){
    			var obj=document.createElement('div');
    			obj.setAttribute("id","div_temp");
    			//obj.setAttribute("class","liTemp");
    			//obj.setAttribute("className","liTemp");
    			//r�cup�ration de l'espace occup�e par la ligne :
    			var x = myObjectClick.offsetWidth +"px" ;
    			var y = myObjectClick.offsetHeight +"px";
    			var test = findPos(myObjectClick);
    			var x2 = test[0] +"px" ;
    			var y2 = test[1] +"px";
    			obj.setAttribute("style","background-color:red;width:"+x+";height:"+y+";position:absolute;top:"+y2+";left:"+x2);
    			obj.setAttribute("cssText","background-color:red;width:"+x+";height:"+y+";position:absolute;top:"+y2+";left:"+x2);
    			//et la rapidos au lieu d'un texte node .. ()-:-)
    			obj.innerHTML = "test";
    			divTempToMove = obj;
    			document.getElementsByTagName('body')[0].appendChild(obj);
    }
     
     
    function findPos(obj) {
    	var curleft = curtop = 0;
    	if (obj.offsetParent) {
    	do {
    			curleft += obj.offsetLeft;
    			curtop += obj.offsetTop;
    	} while (obj = obj.offsetParent);
    	}
    	return [curleft,curtop];
    }
     
    //fonction permettant de 
    function GetPositionAllLine(){
     
    }
    window.onload = init_evenement;
    </script>
    </head>
     
    <body>
    <table width="100%" border="1" class="drag">
      <tr id="line1" >
        <td>Ligne 1</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr id="line2">
        <td>Ligne 2</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr id="line3">
        <td>Ligne 3</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr id="line4">
        <td>Ligne 4</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr id="line5">
        <td>Ligne 5</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    Ligne en cours : <input type="text" id="enCours" /><br  />
    Ligne Finale : <input type="text" id="prochaine" /><br  />
    Ligne survol�e : <input type="text" id="survol" /><br  />
    </body>
    </html>
    j'ai regardé ton code mais je pense qu'il est préférable que tu passes par le miens

  5. #5
    Membre du Club
    Inscrit en
    Mai 2009
    Messages
    8
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 8
    Par défaut
    je vais essayer mais à première vue c'est ce qu'il me faut.
    je vais aussi tenter de l'adapter à un autre de mes besoins : permettre le drag and drop entre plusieurs tableau.

    je vais mettre en résolu ce post en attendant que j'essais.

    merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Image background ok sous IE, rien sous FF
    Par zibizibi2 dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 30/05/2009, 14h37
  2. Apache n'affiche rien sous Linux!
    Par ploxien dans le forum Tomcat et TomEE
    Réponses: 1
    Dernier message: 11/06/2007, 11h14
  3. pb masquer ligne d'un tableau sous IE (fonctionne sous firefox)
    Par nocoment dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/04/2007, 16h37
  4. [IReport]Tableau a partir de donnée sous Java
    Par Devilpika dans le forum iReport
    Réponses: 3
    Dernier message: 31/01/2007, 10h30
  5. tableau dynamique via une table sous sql server
    Par bibi2607 dans le forum ASP
    Réponses: 5
    Dernier message: 21/02/2005, 15h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo