Générer un événement d'après la position d'un objet

**topo.design** · 19/02/2014, 15h10

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

**SpaceFrog** · 19/02/2014, 15h14

Un truc comme ça ?
http://www.webresourcesdepot.com/dra...y-ui-tutorial/

**topo.design** · 19/02/2014, 15h20

C'est exactement ça, mais comme je suis en train d'apprendre le JS, j'aimerai procéder par étape plutôt que de "pomper" un code existant pour vraiment comprendre ce que je fais et pouvoir faire d'autre choses en utilisant les fonctionnalité de JS.

Merci pour ton lien, vais regarder ça de près =)

**SpaceFrog** · 19/02/2014, 15h23

En fait là on ne peut pas dire vraiment "pomper", il s'agit d'un plugin Jquery

**topo.design** · 19/02/2014, 15h26

Oui, d'où mes guillemets

**topo.design** · 20/02/2014, 09h10

Mince, j'ai pas été assez clair, ce que je souhaite c'est réaliser une exercice pratique en JS (je suis en auto apprentissage de ce langage).
Mais ma demande a été déplacée dans la section jquery, je risque d'en attendre la réponse assez longtemps :p

Générer un événement d'après la position d'un objet

JavaScript

Vue hybride

Discussions similaires

Partager

Partager