Un ami m'a quelque temps donné un code JavaScript à modifier.
Au départ, on voyait des catégories contenant des forums, et on pouvait, grâce au drag&drop, changer l'ordre des catégories et des forums.
Il m'a demandé de modifier le script pour faire en sorte que l'on puisse envoyer un forum dans une autre catégorie.
Le problème, c'est que je bosse dessus depuis 2 jours non-stop et je n'ai toujours pas trouvé de solution...
Vu que je suis parti du script permettant de changer l'ordre des catégories et des forums, j'avais donc deux objectifs :
Bloquer le déplacement des catégories
Permettre le déplacement d'un forum d'une catégorie à une autre.
J'ai réussi à bloquer le déplacement des catégories, mais sur le déplacement des forums d'une catégorie à une autre, je galère...
Le problème semble venir des lignes 187 à 223 :
var avant = null; //La balise que l'on va utiliser pour insertBefore()
var liste2 = document.getElementById('liste2'); // On récupère le ul contenant la liste des catégories li
//print_r(liste2.childNodes);
for(var j=0; j<liste2.childNodes.length; j++) // On parcourt les enfants li de cette liste
{
if(!pair(j))
{
var tempListe3 = liste2.childNodes.item(j);
var liste3 = tempListe3.childNodes.item(3); // Pour chaque enfant, on récupère la liste des forums
for( var i = 0; i < liste3.childNodes.length; i++) // On parcourt la liste des forums
{
var el = liste3.childNodes.item(i); // On prend un forum
//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 deplacement
//Enfin, on verifie les valeurs de offsetTop
if( el.tagName && el.tagName.toLowerCase() == 'li' && el != dragged && el != ghost && el.offsetTop + dY > dragged.offsetTop + dragged.offsetHeight/2 ) /*<!> changement de la condition sur les offsets*/
{
avant = el; // Si c'est le bon
break; //On arrête la boucle
}
}
if(avant != ghost.nextSibling) //Si ghost est avant "avant", alors "avant" est après ghost
{
ghost.parentNode.removeChild(ghost);
if( avant == null )
{
liste3.appendChild(ghost);
liste = liste3;
}
else
{
avant.parentNode.insertBefore(ghost, avant);
liste = avant.parentNode;
}
}
}
}
En fait, dès que je tente de déplacer un forum, il va soit dans la catégorie tout à fait en bas si je suis au dessus d'une catégorie en particulier, soit dans la catégorie tout à fait en haut si je suisd en dessous du tableau regroupant toutes les catégories...
Voici le code complet actuel :
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 element
function getCssStyleValue(element /*element html*/, style/*style recherche*/)
{
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('li#forum', 'cursor: move;');
//postamble();
});
var dragged = null; //balise li en cours de deplacement
var liste = null; //liste en cours de modification (balise ul)
var dX, dY; //Decalages
var ghost = document.createElement('li');
//Pour le differencier un peu des vraies "div"
ghost.style.backgroundColor = 'transparent';
ghost.style.borderStyle = 'dashed';
function list_onmousedown(event) // Quand on clique sur un li
{
var target = event.target || event.srcElement; // On récupère l'élément cliqué
if(target.id == "cat") // Si c'est une catégorie, on bloque le déplacement
return; // Fin de la fonction
//Si il y a deja un ul en deplacement, on "simule" un evènement onmouseup, donc on arrête le déplacement
if( dragged ) list_onmouseup(event);
//A la recherche d'une balise <ul class="liste">
var element = target; // Donc element contient l'élément cliqué
while(element) // Tant que element existe
{
if( element.className && element.className.match(/\bliste\b/) ) // Si on est remonté à l'ul de classe liste, c'est bon
break; // On arrête la boucle, victoire!
element = element.parentNode; // Si on n'est pas à la liste, on est dedans, donc on remonte à la balise au dessus et on relance la boucle
}
if( element == null ) //si element = null, alors on n'a rien trouve, on quite cette fonction
return;
liste = element; // Donc liste vaut la balise <ul> contenant les forums
//Reste maintenant a trouver le "li" deplace
var element = target; // Donc element redevient l'élément cliqué
while(element) // Tant que element existe
{
if( element == liste) //On est remonte jusqu'a la liste elle-même, cela signifie que l'on n'a pas clique sur une balise li
return;
else if ( element.tagName && element.tagName.toLowerCase() == 'li' ) // Sinon, on est bien sur une balise li contenant un forum, on coupe la boucle, victoire!
break;
element = element.parentNode; // Sinon, on est dans un label ou autre, donc on remonte jusqu'à atteindre le li
}
dragged = element; // Donc dragged contient le li déplacé
//On annule le comportement par defaut:
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; // Donc element contient le li déplacé
do
{
dX -= element.offsetLeft; // On enlève la distance coin haut gauche de l'élément->gauche fenêtre à dX
dY -= element.offsetTop; // On enlève la distance coin haut gauche de l'élément->haut fenêtre à dY
element = element.offsetParent; // Donc element contient maintenant son parent le plus proche, donc ul
} while( element && getCssStyleValue(element, 'position') != 'top'); // tant que element existe et que "position" de lement n'est pas "top"
/*<!> on definit aussi la dimension de ghost, a cause de la suppression d'un style css ligne 194*/
dragged.style.width = ghost.style.width = dragged.offsetWidth + 'px';
dragged.style.height = ghost.style.height = dragged.offsetHeight + 'px';
liste.insertBefore(ghost, dragged); //Inserer le fantôme juste avant l'element en cours de deplacement
//On simule un premier deplacement
list_onmousemove(event);
}
function print_r(obj)
{
win_print_r = window.open('about:blank', 'win_print_r');
win_print_r.document.write('<html><body>');
r_print_r(obj, win_print_r);
win_print_r.document.write('</body></html>');
}
function r_print_r(theObj, win_print_r)
{
if(theObj.constructor == Array ||
theObj.constructor == Object)
{
if (win_print_r == null)
win_print_r = window.open('about:blank', 'win_print_r');
}
for(var p in theObj)
{
if(theObj[p].constructor == Array|| theObj[p].constructor == Object)
{
win_print_r.document.write("<li>["+p+"] =>"+typeof(theObj)+"</li>");
win_print_r.document.write("<ul>")
r_print_r(theObj[p], win_print_r);
win_print_r.document.write("</ul>")
}
else
{
win_print_r.document.write("<li>["+p+"] =>"+theObj[p]+"</li>");
}
}
win_print_r.document.write("</ul>")
}
function pair(nombre)
{
if(nombre/2 == Math.round(nombre/2))
{
return true;
}
else
{
return false;
}
}
function list_onmousemove(event)// Quand la souris bouge
{
if( dragged) // Si un élément est en train d'être bougé
{
dragged.style.position = 'absolute'; // On définit à cet élément une position absolue
dragged.style.left = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft - dX + 'px'; // On l'aligne avec la position x de la souris
dragged.style.top = event.clientY + document.documentElement.scrollTop + document.body.scrollTop - dY + 'px'; // Idem mais pour les y
//Deplacement du ghost
var avant = null; //La balise que l'on va utiliser pour insertBefore()
var liste2 = document.getElementById('liste2'); // On récupère le ul contenant la liste des catégories li
//print_r(liste2.childNodes);
for(var j=0; j<liste2.childNodes.length; j++) // On parcourt les enfants li de cette liste
{
if(!pair(j))
{
var tempListe3 = liste2.childNodes.item(j);
var liste3 = tempListe3.childNodes.item(3); // Pour chaque enfant, on récupère la liste des forums
for( var i = 0; i < liste3.childNodes.length; i++) // On parcourt la liste des forums
{
var el = liste3.childNodes.item(i); // On prend un forum
//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 deplacement
//Enfin, on verifie les valeurs de offsetTop
if( el.tagName && el.tagName.toLowerCase() == 'li' && el != dragged && el != ghost && el.offsetTop + dY > dragged.offsetTop + dragged.offsetHeight/2 ) /*<!> changement de la condition sur les offsets*/
{
avant = el; // Si c'est le bon
break; //On arrête la boucle
}
}
if(avant != ghost.nextSibling) //Si ghost est avant "avant", alors "avant" est après ghost
{
ghost.parentNode.removeChild(ghost);
if( avant == null )
{
liste3.appendChild(ghost);
liste = liste3;
}
else
{
avant.parentNode.insertBefore(ghost, avant);
liste = avant.parentNode;
}
}
}
}
}
}
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);
Merci de bien vouloir m'aider...
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
Sta' dire que se manger 250 lignes de code pour debuger du drag'n'drop sans framework ni rien, ça demande pas mal de motivation.
Tu peux éventuellement poster le code html de la page sur laquelle se font les drag'n'drop au complet, pour qu'on puisse essayer en local et voir ce que racontent la console d'erreur et firebug. (oui, je dit qu'il y a trop de code et j'en demande plus, et alors?)
De même que Sephi, les 250 lignes me donnent pas vraiment envie mais :
Pourquoi tu fais pas un truc plus simple :
Lorsque tu drags l'élement, il suit la souris après, descend le de 5-10px de manière à ce qu'il ne soit pas sous la souris.
Ensuite tu mets des évènements onmouseover sur chaque éléments de ta liste, qui a chaque passage mets dans une variable toto this (toto = this;)
Puis quand tu drops ton truc, tu fais un insertBefore toto.
Pour les id, je sais qu'elles sont uniques, c'était pour les tests, je comptais les retirer à la fin, mais tu ne t'imagines pas le nombre de tests que j'ai fais, au début, je remettais tout en ordre après chaque test, mais à force, je laissais...
Sinon, merci bien pour ton code, je l'arrange et je le reposte ici pour ceux qui voudraient .
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
J'ai modifié le style du drag, et j'ai fait en sorte que li et over échangent de place sans se préoccuper de se placer avant ou après en rajoutant un div contenant un forums pour chaque forum, ce qui fait que le over et le li ont tous deux un div parent, il suffit donc d'échanger de div et le tour est joué .
Je rouvre le sujet car j'ai à nouveau un mini problème, au chargement de la page, les forums qui sont seuls dans des catégories ne peuvent être déplacés, mais quand on déplace 2 forums d'une catégorie où il y en a 3(par exemple), et donc qu'un autre forum se retrouve seul, on peut le déplacer, lui...
J'ai donc créé une fonction pour analyser le tableau toutes les 100 millisecondes, mais tout ce que ça fait, c'est enlever le curseur "not-allowed" sur le forum qui ne se retrouve plus seul...
J'ai mis à jour le code du dessus, merci de m'aider à nouveau...
@ Tiller : Le pire, c'est que c'est un copain qui a balancé ça dans un accès d'immaturité combinée à de la moquerie de ma "geektude"... J'ai honte...
Sinon, merci de consacrer de ton temps pour m'aider, car je sais que ce n'est pas facile et que mon code aura certainement des infamies, comme le petit setTimeout que j'aurais pu éviter à la fin de ma fonction, mais bref, c'était pour des tests, c'est mon excuse en or !
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
Bah si je fais ça, ça ne marche pas car je ne sais pas pourquoi mais j'ai des objectText tout les deux nœuds, et ils sont comme inexistants, pas de tagName, pas de class, pas de value, rien!
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
Je comprends pas, quand j'avais fait ça chez moi, ça marchait pas et là, ça marche...
Bref, merci encore Tiller...
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
Problème aimentation
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.