Bonjour,


Je souhaite créer une modification css d’après la position d'un élément (ici un paragraphe).

J'ai pour l'instant réussi a déplacer l'élément et en afficher ses coordonnées dans une div en utilisant JQuery.

A présent je voudrais que lorsque la valeur de X (patX dans le code) est supérieure à 1000 la couleur de fond de mon paragraphe deviennent rouge.

Je vous joint le code que j'ai fait pour gérer ce déplacement :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="iso-8859-1">
	<title>LEs petits proverbes</title>
 
	<script src="jQuery.js"></script>
	<script>
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
$(document).ready(function() {
	var part = document.getElementById("par1");
	//variables globales
	var dist_x, dist_y;
	var depl = false;
	$(part).bind("mousedown", function(event){
		if (event.which==1){  // bouton gauche
			depl = true; // deplacement en cours
			// calcul de distance
			dist_x = event.pageX - $(this).offset().left;
			dist_y = event.pageY - $(this).offset().top;
		}
	});
	$(document).bind("mousemove", function(event){
		if (depl == true) // deplacement en cours
			// application des regles de style sur les coordonnées du paragraphe
			$(part).css({"left" : event.pageX - dist_x + "px","top" : event.pageY - dist_y + "px"});
	});
	$(document).bind("mouseup", function(event){
		if (event.which==1)  // bouton gauche
			depl = false; // deplacement fini
			document.getElementById("patx").innerHTML = event.pageX;
			var contex = document.getElementById("patx");
			document.getElementById("paty").innerHTML = event.pageY;
			if (document.getElementById("patx").value >= 100)
			{  $("p", contex).css({ "background-color" : "red"})};
	});
});
Code html : 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
	</script>	
</head>
 
<body>
 
	<p id="par1" style="position:absolute;border:solid 1px">
		Element que l'on peut déplacer
	</p>
	<div>
		<p id="patx">
		</p>
	</div>
	<div id="paty">
	</div>
 
</body>
</html>

Je débute en JS (je suppose que voue l'avez deviné ), et ce que je voudrais arriver à faire en finalité c'est ajouter un article dans un panier (en récupérant les données via ajax/php) par simple drag & drop, mais je préfère procéder par étape pour bien comprendre ce que je fais.

Pour le moment je sèche sur comment faire pour générer un événement en rapport à la positionnement d'un objet.

Merci d'avance de m'aider à avancer