Liens Draggables sans activation

7804j · 25/06/2011, 20h15

Bonjour,

Je possède sur mon site une série de "liens draggables".
Ce sont donc des objets pouvant être déplacés (jusque là, pas de problème) mais aussi des liens ordinaires. Par conséquent, lorsqu'on les soulève, puis les lâche quelque part, le lien s'active. Ce n'est absolument pas le comportement voulu et je souhaiterais l'enlever.

J'ai fait une recherche sur Google, j'ai trouvé plusieurs sujets traitant ce problème, mais la plupart d'entre eux n'avaient pas de réponse. Cependant, je pense qu'on devrait pouvoir utiliser quelque chose du genre "preventDefault" mais étant nouveau en JQuery, je ne vais pas trop m'avancer...

Merci d'avance de votre aide,

7804j

danielhagnoul · 25/06/2011, 22h32

Bonsoir

Sans le code du cas qui vous préoccupe, je ne peux donner que des indications.

Le remède radical pour éviter l'action par défaut et la transmission de l'événement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(selecteur).click(function(e){
  ...
  return false;
});

Mais bien souvent on a besoin de transmettre l'événement ou l'action par défaut. Voir : http://api.jquery.com/event.preventDefault/ et http://api.jquery.com/event.stopPropagation/.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(selecteur).click(function(e){
  e.stopPropagation();
  ...
});

Il y a aussi la conception de votre code. On peut distinguer les éléments qui ont besoin d'une action spécifique en leur donnant une classe.

7804j · 26/06/2011, 09h54

Merci de ces informations, qui sont effectivement fonctionnelles dans le cas que je vous ai présenté. Je pense malheureusement que c'était un erreur de ma part de parler de "l'action par défaut" qui s'applique lorsque l'on clique sur un lien, étant donné que c'est justement une action non-naturelle que j'ai ajoutée sur ce derniers.

Au moment du clic sur ces derniers, j'ai donc ajouté l'ouverture d'une fenêtre (utilisant un plugin jQuery) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
jQuery("#lien").click(function() {
				var nombre1 = Math.floor(Math.random() * 150)+90;
				var nombre2 = Math.floor(Math.random() * 60)+50;
				jQuery.newWindow({id:"id-fenetre",posx:nombre1,posy:nombre2,width:800,height:500,title:"Nom de la fenêtre"});
				jQuery.updateWindowContentWithAjax("id-fenetre","/fichier.php");
			});

Mais ce lien a la classe "draggable" qui le rend déplaçable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 jQuery( ".draggable" ).draggable({ cursor: 'move', opacity: 0.6, stack: ".apps"});

Désolé de ne pas avoir avant formulé correctement le problème, mais votre réponse était tout de même instructive à propos des fonctions que vous avez indiquées.

Pour ce cas là, ne faudrait-il pas un event du genre "OnDrag" ?

danielhagnoul · 26/06/2011, 10h05

Bonjour

Si vous utilisez jQuery UI, UI Draggable possède des propriétés, des méthodes et des événements.

Voir la documentation et le code des exemples : http://jqueryui.com/demos/draggable/ et http://jqueryui.com/demos/draggable/#events

7804j · 26/06/2011, 10h50

Mais comment fait-on pour annuler l'évènement se produisant "onClick" lors de l'action "Drag" ?

J'ai essayé de chercher un peu mais je n'ai rien réussi à faire fonctionner :/

danielhagnoul · 26/06/2011, 21h21

Bonsoir

En effet, c'est un cas un peu spécial. Les moyens habituels ne conviennent pas.

J'ai été obligé de faire appel à un booléen et à un setTimeout pour résoudre le problème.

Exemple :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		/*
		.conteneur {border-spacing:4px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:400px; height:120px; }
		*/
 
		/* -- */
		#draggable { width: 150px; height: 150px; padding: 0.5em; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="draggable" class="ui-widget-content">
			<p>Drag me around</p>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-26T21:30:00.000+02:00" pubdate>2011-06-26</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2rc1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
			/* -- */
			var boolDrag = false;
 
			$("#draggable").click(function(event){
				if (boolDrag){
					return false;
				}
 
				alert(event.target + ", " + new Date(event.timeStamp).toLocaleString());
			});
 
			$("#draggable").draggable({
				stop: function(event, ui){
					boolDrag = true;
 
					setTimeout(function(){
						boolDrag = false;
					}, 500);
				}
			});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

7804j · 26/06/2011, 21h47

Merci de l'aide, en regardant votre code je saisis maintenant mieux le fonctionnement

En tout cas, cela fonctionne parfaitement. J'ai passé le ~~timestamp~~ délai à 1 milliseconde et cela a l'air de toujours fonctionner correctement. Aviez-vous mis 500 pour une raison particulière ?

danielhagnoul · 26/06/2011, 22h26

J'avais également mis le délai à 1s à l'origine.

Mais si l'utilisateur est très dynamique, il déplace la division et clic immédiatement, le premier clic ne fonctionne pas.

Je crois que 0.5s est un bon compromis.

25/06/2011, 20h15	#1
7804j Invité de passage Jonathan Zimmermann Inscription : juin 2011 Messages : 20 Détails du profil Informations personnelles : Nom : Jonathan Zimmermann Localisation : Suisse Informations forums : Inscription : juin 2011 Messages : 20 Points : 3 Points : 3	Liens Draggables sans activation Bonjour, Je possède sur mon site une série de "liens draggables". Ce sont donc des objets pouvant être déplacés (jusque là, pas de problème) mais aussi des liens ordinaires. Par conséquent, lorsqu'on les soulève, puis les lâche quelque part, le lien s'active. Ce n'est absolument pas le comportement voulu et je souhaiterais l'enlever. J'ai fait une recherche sur Google, j'ai trouvé plusieurs sujets traitant ce problème, mais la plupart d'entre eux n'avaient pas de réponse. Cependant, je pense qu'on devrait pouvoir utiliser quelque chose du genre "preventDefault" mais étant nouveau en JQuery, je ne vais pas trop m'avancer... Merci d'avance de votre aide, 7804j
	00

26/06/2011, 10h05	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonjour Si vous utilisez jQuery UI, UI Draggable possède des propriétés, des méthodes et des événements. Voir la documentation et le code des exemples : http://jqueryui.com/demos/draggable/ et http://jqueryui.com/demos/draggable/#events __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

26/06/2011, 22h26	#8
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	J'avais également mis le délai à 1s à l'origine. Mais si l'utilisateur est très dynamique, il déplace la division et clic immédiatement, le premier clic ne fonctionne pas. Je crois que 0.5s est un bon compromis. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

26/06/2011, 10h50	#5
7804j Invité de passage Jonathan Zimmermann Inscription : juin 2011 Messages : 20 Détails du profil Informations personnelles : Nom : Jonathan Zimmermann Localisation : Suisse Informations forums : Inscription : juin 2011 Messages : 20 Points : 3 Points : 3	Mais comment fait-on pour annuler l'évènement se produisant "onClick" lors de l'action "Drag" ? J'ai essayé de chercher un peu mais je n'ai rien réussi à faire fonctionner :/
	00

26/06/2011, 21h47	#7
7804j Invité de passage Jonathan Zimmermann Inscription : juin 2011 Messages : 20 Détails du profil Informations personnelles : Nom : Jonathan Zimmermann Localisation : Suisse Informations forums : Inscription : juin 2011 Messages : 20 Points : 3 Points : 3	Merci de l'aide, en regardant votre code je saisis maintenant mieux le fonctionnement En tout cas, cela fonctionne parfaitement. J'ai passé le ~~timestamp~~ délai à 1 milliseconde et cela a l'air de toujours fonctionner correctement. Aviez-vous mis 500 pour une raison particulière ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email