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.

Liens Draggables sans activation

jQuery

Discussions similaires

Partager

Partager