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> </td>
<td> </td>
</tr>
<tr id="line2">
<td>Ligne 2</td>
<td> </td>
<td> </td>
</tr>
<tr id="line3">
<td>Ligne 3</td>
<td> </td>
<td> </td>
</tr>
<tr id="line4">
<td>Ligne 4</td>
<td> </td>
<td> </td>
</tr>
<tr id="line5">
<td>Ligne 5</td>
<td> </td>
<td> </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> |
Partager