Discussion :

[franfr57]

Bonjour,
je souhaite déplacer un objet div vers la gauche.
Dans une page html, cela fonctionne avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function resizeByLeft(p_curX){
	var newPosX;
	var newWidth;
	newWidth = (initialWidth + (initialCurX - p_curX));
	if(newWidth > minWidth){
 
		newPosX = p_curX - ecartX;
		newPos.value = newPosX;
		objectToDrag.style.left = newPosX + 'px';
	}
}

Cependant, quand je suis dans un tableau avec de multiple div cela ne fonctionne plus cela ne déplace plus l'objet vers la gauche...

Y a t'il une autre méthode pour faire cela?

Ou quelqu'un pourrait regarder mon code pour m'aider SVP?

Merci pour votre aide.

[le_chomeur]

comment est déclaré ton objet : objectToDrag ?

[E.Bzz]

Bonjour,
le HTML concerné et les CSS associés seraient les bienvenues ...

A+

[franfr57]

J'utilise la librairie JSGantt(http://www.jsgantt.com/) en javascript pour faire un diagramme de Gantt. j'ai réussi à agrandir sur la gauche les barres du diagramme (avec gestion scrollbar) mais je n'arrive pas à agrandir sur la gauche car objectToDrag.style.left = newPosX + 'px'; ne fonctionne pas...

Le div est déclarer à la ligne 1404 du fichier js comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
'<div onmousedown=downAction(this,event); onmousemove="moveAction(this, event);" id=taskbar_' + vID + ' title="' + vTaskList[i].getName() + ': ' + vDateRowStr + '" class=gtask style="background-color:' + vTaskList[i].getColor() +'; height: 13px; width:' + Math.ceil((vTaskRight) * (vDayWidth) - 1) + 'px; cursor: pointer;left:525px;" ' +
 
                     'onclick=JSGantt.taskLink("' + vTaskList[i].getLink() + '",300,200);>' + //vTaskList[i].getStartX() + //getStartX getEnd

Le fichier CSS est aussi livrai avec la librairie jsGantt. Pareil pour le HTML. J'ai juste joint à ce produit mes commandes et fonctions javascript pour redimenssionner les barres du diagramme.

J'ai aussi remarquer que pour utiliser objectToDrag.style.left il faut qu'il soit renseigner, je l'ai renseigner sur une barre dont je connait la position en pixel. Cependant cela ne fonctionne pas...

[franfr57]

Le problème vient que la position est block et non relative. Mais si je passe ce paramètre ne relative, les barres du diagrammes se retrouve en dessous de tout les autres objets (carré gris, lignes du tableau...) et je ne peux pas les redimensionner.

Comment puis je résoudre ce problème?

Merci pour votre aide

[le_chomeur]

les mettre dans un conteneur en position relative et elle en position absolute

[E.Bzz]

les barres du diagrammes se retrouve en dessous de tout les autres objets (carré gris, lignes du tableau...) et je ne peux pas les redimensionner.

Comment puis je résoudre ce problème?

Il faut que tu définisses, pour les éléments que tu veux voir passer "au-dessus" une valeur de z-index (CSS) supérieure à celle des éléments qui doivent rester "en-dessous".
z-index permet de définir l'ordre d' "empilement" des éléments.

A+

[E.Bzz]

les mettre dans un conteneur en position relative et elle en position absolute

J'y avait penser, mais si les scripts sont basés sur un positionnement relatif pour tous, ça risque de perturber certaines fonctions

A+

[le_chomeur]

bon ben pas de bol ....
ça va être chiant de travailler sur des objet positionné en relatif :-/

[E.Bzz]

C'est qu'un risque potentiel (je connais pas JSGantt ).

A confirmer par franfr57, car ça vaut le coup de tester l'absolute (surtout si le z-index ne règle pas tout)

A+

[franfr57]

J'ai trouvé la solution par hasard.
En fait je pense que les z-index était déja bon.
En mettant les paramètres style.left et style.top à 0 de mon div lorsque je passe dessus (onmousemove), cela fonctionne bien.

Merci encore pour votre aide.