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

Version imprimable

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:

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:

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:

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é :wink:), 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 ;)

19/02/2014, 15h14
SpaceFrog

Un truc comme ça ?
http://www.webresourcesdepot.com/dra...y-ui-tutorial/
19/02/2014, 15h20
topo.design

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 =)
19/02/2014, 15h23
SpaceFrog

En fait là on ne peut pas dire vraiment "pomper", il s'agit d'un plugin Jquery
19/02/2014, 15h26
topo.design

Oui, d'où mes guillemets :P
20/02/2014, 09h10
topo.design

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
20/02/2014, 10h12
SpaceFrog

Ben le code donné est en jquery ...
La place du post est donc dans le forum jquery ... :koi:
20/02/2014, 10h26
topo.design

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.

Citation:

Je souhaite créer une modification css d’après la position d'un élément (ici un paragraphe).
20/02/2014, 10h53
SpaceFrog

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