11548 sujets

JavaScript, DOM et API Web HTML5

[jquery]déplacement d'un élément au clic (.bind "click")

Bonjour,

je vous expose ma situation:
je viens d'acheter un livre sur le jquery et je suis assidument les premiers chapitres.
Mais j'ai ici un morceau de code qui ne fonctionne pas malgré qu'il soit quasiment identique à celui du livre. Dur de comprendre le pourquoi par moi-même.

situation:
-une page html classique avec divers éléments dont deux "div" séparés nommés #bloc1 et #bloc2.
-un code jquery (bien lié etc, je n'en suis tout de même pas là).

$(document).ready(function() {
	$("#bloc1").bind("click",function(event){
		$("#bloc2").css({left:event.pageX,top:event.pageY});
		event.stopPropagation();
	});
});


Absolument aucune réaction dans ma page web. Pourquoi ?
Modifié par Zenike (13 Oct 2011 - 20:43)
Hello,

De nombreuses hypothèses sont envisageables. Voici l'une d'entre elles :
- Ton élément d'id "bloc2" est positionné de façon statique (attribut position).

Mais pour savoir si c'est la bonne, il nous faut une page HTML complète montrant le problème !

Tu peux également t'amuser à utiliser un outil comme Firebug pour voir si tes changements sont bien pris en compte.
Bien sûr.
A la base j'utilisais une page d'un site web créé au travail.
J'ai ici réécris un bout d'html, minimaliste:

<body>
	<div style="background-color: red;height: 800px;">
	
		<div>
			<a id="bloc1" href="#">menu</a>
		</div>
		
		<ul id="bloc2" style="width: 300px;display: none;background-color: green; border: 1px solid blue;">
			<li><a href="#">lien1</a></li>
			<li><a href="#">lien2</a></li>
		</ul>
	</div>
</body>


On peut difficilement faire plus simple mais pourtant ça ne marche pas plus qu'avant.
Pour le positionnement en "static", je ne comprends pas vraiment le soucis, mais ce point n'est pas évoqué dans mon bouquin donc je ne m'en étais pas tracassé.
c'est pourtant le soucis, rajoute dans le style du bloc2 padding:absolute; tu devrais voir la différence. (idéalement il faudrait un bloc en position:relative tout dépend du but évidemment).

Tu peux également ajouter le padding:absolute dans la fonction de ton click();
kenor a écrit :
padding:absolute;


"Position" tu veux dire je suppose ?

En effet, avec cette déclaration en plus, j'obtiens bien ce que je veux.
Par contre, si un des parents est positionné, alors mon bloc mobile est décalé vu que le calcul de position est fait normalement par rapport au bord haut gauche de la "page".

Enfin soit, ça prouve juste que ce n'est pas la meilleure méthode pour faire ça, mais ici le but était juste de tester cette fonction et ça marche; c'est parfait.

Merci de votre aide Smiley smile

Nicolas
Dans la continuité de mon exercice, toujours avec le même html minimaliste copié plus haut:

je veux maintenant déplacer mon div (drag)lorsque le clic gauche est maintenu.

$(document).ready(function() {

	var delta_x, delta_y;
	var drag = false;

	$("#bloc2").bind("mousedown",function(event){
		if(event.which != 1) return;
		drag = true;
		var offset=$(this).offset();
		delta_x = event.pageX - offset.left;
		delta_y = event.pageY - offset.top;
	});
	
	$("#bloc2").bind("mousemove",function(event){
		if(!drag) return;
		$(this).css({"left":event.pageX - delta_x + "px","top":event.pageY - delta_y+"px"});
	});
	
	$("#bloc2").bind("mouseup",function(event){
	
		if(event.wich != 1) return;
		
		drag=false;
	});
});


Ce code fonctionne très bien A CONDITION que j'enlève la ligne 
if(event.wich != 1) return;
à la fin du document (soit la 2ème occurence de ce if. 4ème ligne en partant de la fin).
Je ne comprends pas pourquoi. J'utilise déjà ce code un peu plus haut pour tester quel est le bouton cliqué et ça fonctionne très bien.

PS: pas de soucis Kenor, ça m'aura quand même bien aidé Smiley lol
Modifié par Zenike (16 Oct 2011 - 19:01)
Sujet clos
Aller à