UI Draggable, modifications du CSS inopérantes

Version imprimable

29/06/2011, 16h26
7804j

UI Draggable, modifications du CSS inopérantes
Bonjour,

J'ai un problème concernant la fonction addClass sur un élément draggable pour arriver à une position fixed.

Je m'explique.

J'ai créé une class du type :
Code:

1 2 3 4 5 6 .maclass { position : fixed; top :500px; left: 400px; }
J'ai pris un élément et j'ai mis un addClass("maclass") onclick. En cliquant sur l'élément, il va bien à l'endroit prévu, mais de manière non progressive ==> d'un seul coup.
J'ai donc ajouté draggable() à cet élément, j'ai refait le même test et là, au lieu d'aller instantanément sur la position, il y va gracieusement...
Donc, premier problème : pourquoi ?

Ok, ça me pose pas trop de problème car je voulais justement qu'il soit draggable. Par contre, je me suis aperçu qu'en allant sur cette position, il était légèrement décalé la deuxième fois par rapport à la première. J'ai donc supposé que c'était un décalage fixe, mais en changeant quelques valeurs j'ai constaté qu'il dépendait de beaucoup d'autres paramètres.

Je ne sais donc absolument pas à quoi est dû ce décalage...

Merci d'avance de votre aide, si vous avez compris mon problème.

7804j
30/06/2011, 00h38
danielhagnoul

Bonsoir

Le mot "class" est un mot réservé, on ne peut l'utiliser que sous forme de texte. Vous devez donc choisir un nom plus explicite pour nommer votre classe.

Euh...Oui, effectivement, mais dans le véritable exemple je n'avais pas appelé cette class "class" et ça ne fonctionnait pas quand même :/ En gros, voici mon code comme je l'avais ==>

Code:

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
 
<style> 
		.toggler { width: 500px; height: 200px; position: relative; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
		.newClass {position:fixed; top:400px;}
	</style> 
	<script> 
			jQuery(document).ready(function() {
	$( "#effect" ).draggable();
 
	});
	$(function() {
		$( "#button" ).click(function() {
			$( "#effect" ).addClass( "newClass", 1000);
		});
 
 
	});
	</script> 
 
 
 
<div class="demo"> 
 
<div class="toggler"> 
	<div id="effect" class=" ui-corner-all"> 
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
	</div> 
</div> 
 
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> 
 
</div><!-- End demo -->

01/07/2011, 01h43
danielhagnoul

Bonsoir

Attention: $( "#effect" ).addClass( "newClass");.

.newClass {position:fixed !important; top:400px !important;}.

Il s'agit d'un problème purement CSS qui concerne la priorité et le "poids" de nouvelles propriétés CSS par rapport aux propriétés déjà appliquées.

Il n'est pas toujours évident de déterminer la priorité et le "poids" d'une propriété CSS. Je vous conseille la lecture d'une bonne documentation.

Les nouvelles propriétés CSS 2.1 et le CSS 3 compliquent singulièrement le calcul du poids d'une propriété CSS.

Dans votre cas, c'est la feuille de style CSS de jQuery UI qui a le plus de poids.

Il faut retenir que la déclaration "!important" ajoute du poids à votre demande, mais qu'il ne faut surtout pas en abuser sinon toutes vos demandes auront à nouveau le même poids. Certains auteurs recommandent même de s'en passer.
01/07/2011, 15h28
7804j

Merci, cela a effectivement eu un impact et les objets sont maintenant placés bien plus près de leur véritable position mais deux problèmes résident :

- Ils ne sont pas tout à fait à leur véritable position, il reste un un petit décalage :/

- Après avoir été déplacés, ils ne sont plus draggable que dans le sens qui n'avait pas été impacté par !important. C'est-à-dire que si je met top:500px !important; ils ne pourront être déplacés que de droite à gauche, et si je met une valeur pour top ainsi qu'une valeur pour right, ils ne peuvent plus être déplacés du tout...
02/07/2011, 22h22
danielhagnoul

Bonsoir

Je pensais avoir été clair.

On peut donner du "poids" à une propriété CSS en utilisant "!important" mais le résultat est de votre responsabilité. Forcer la main aux styles jQuery UI donne rarement de bons résultats.

La meilleure solution est de positionner un élément du DOM dans la feuille de style avant d'activer UI, ici draggable() sur cet élément.

On peut aussi retoucher les styles de UI, mais ce n'est pas évident et le résultat n'est pas toujours constant sur tous les navigateurs.
03/07/2011, 19h09
7804j

J'ai trouvé une solution pour que la propriété draggable fonctionne à nouveau. Il m'a donc fallu enlever le !important après la propriété top et ne le laisser que sur la propriété fixed.

Cela le rend donc à nouveau draggable et il vient cette fois-ci à nouveau au bon endroit...Enfin presque.

Comme je vous l'avais dit, il reste bizarrement à 10 pixels EXACTEMENT de décalage par rapport à la position qu'il est censé avoir. Vu que ce décalage était cette fois-ci fixe, j'ai donc réglé le problème en enlevant 10 pixel aux valeurs de ma class...

Bizarre, mais problème résolu :)

Merci encore pour la propriété !important