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

**SpaceFrog** · 20/02/2014, 10h12

Ben le code donné est en jquery ...
La place du post est donc dans le forum jquery ...

**topo.design** · 20/02/2014, 10h26

Oui c'est vrai, mais ce n'est pas la réponse que j'attendais.
Je souhaite apprendre le JS donc me donner la soluce en jquery ne m'apporte pas grand chose.
Mon but n'est pas de réinventer la roue, mais de me donner une exo perso pour mon apprentissage.

En relisant mon message je me rend compte que le paragraphe situé à la suite du code peut amener une confusion, je pourrais le supprimer en éditant mon post mais ça rendait complétement farfelu le fil de discution.

Ma question est ma 1° phrase le reste n'est qu'explication de mes besoins.

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

**SpaceFrog** · 20/02/2014, 10h53

A priori le but étant de faire un Drag Drop en Pur JS je déplace la post dans le forum JS

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

JavaScript

Discussions similaires

Partager

Partager