Discussion :

[Feng-Huang]

Bonjour,

Je précise tout de suite, le code ci-dessous contient du JQuery, mais il n''est pas la source du problème (en tout cas rien ne le laisse penser).

Le script ci-dessous essaye d'instaurer un drag&drop entre plusieurs éléments d'une liste. Ces éléments sont des liens, ils sont donc également cliquable. Le but est donc de faire en sorte de délayer le clic pour l'annuler si l'utilisateur fait un drag&drop, ou le lancer finalement si l'utilisateur n'en fait pas (il s'agissait donc d'un clic).

Problème : la pop-up (déclenchée par le clic) s'ouvre quand même à chaque fois alors que les "alert" sont déclenché quand attendues.

Tentative de résolution : j'ai essayé de changer différents paramètres du drag&drop mais les "alert" montrent clairement que le résultat est celui attendu à ce niveau la.. il n'y a pas le clearTimeout qui ne fonctionne pas comme attendu.

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
<script type="text/javascript">
var t;
 
$( function(){
 
	$('a.object').click( function(){
 
		var href = $(this).attr('href');
		var id = $(this).attr('id');
 
		t = setTimeout(function(){ // On instaure un délai pour empêcher le clic instantané ( qu'on ne veut pas si l'utilisateur veut en fait un drag&drop )
			alert("trigger");
			window.open(href,'popup_' + id, "config='height=640, width=940, scrollbars=yes, resizable=yes");
		},300);
 
		return false;
 
	}).draggable({
		distance: 10, // On attend un déplacement de 10px de l'élément draggable avant de déclencher l'événement "start" et commencer le drag
		start: function(){
			alert("start");
			clearTimeout(t); // Le drag a commencé donc on annule la fonction clic.
		},
		revert: true
	}).droppable({
		accept: 'a.object',
		drop: function(event, ui){
			var fileFrom = ui.helper.text();
			var fileTo = $(this).text();
			var popup = window.open('?module=link&action=add&obj=RSK&fileFrom='+fileFrom+'&fileTo='+fileTo,"add_"+fileFrom,"height=380, width=950");
		}
	});
 
});
</script>

Je joins une petite archive avec le code minimal pour tester.

[tigunn]

Salut,
Je ne suis pas sûr de comprendre ton code; toutefois, il me semble que tu pourrais utiliser

Code :

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

1
2
3
4
$("a#test1").click(function(e){
  e.preventDefault(); // Empêche le navigateur de suivre le lien.
  window.alert("Clic sur a#test1.");
});

?

[Feng-Huang]

Déjà testé, ainsi que stopPropagation et stopImmediatePropagation.

[marcha]

Salut,

L'évènement clic est le résultat d'une succession d'évènements plus basiques

D'abord il faut un mousedown
Ensuite il ne faut pas de mouseout
Et enfin il faut un mouseup

Le clic est levé dans ces conditions juste après le mouseup

Lors d'un drag&drop, tu as

mousedown
mousemove
mouseup

Etant donné que le lien suit la souris il n'y a pas de mouseout et
de ce fait le click est levé juste après le mouseup c'est à dire à la fin
du drag.

En lisant ton code, il me semble que tu t'attends à ce que le click
soit exécuté avant le drag éventuel. Ce n'est pas le cas.

Jquery gère déjà naturellement le cas de l'annulation du comportement
par défaut du lien lorsqu'il est dragué.

Est-ce que le code suivant ne te suffirait pas ?

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
 
	<script type="text/javascript">
	$( function(){
 
		$('a.object').draggable({
			distance: 10, 
			revert: true
		}).droppable({
			accept: 'a.object',
			drop: function(event, ui){
				var fileFrom = ui.helper.text();
				var fileTo = $(this).text();
				var popup = window.open('?module=link&action=add&obj=RSK&fileFrom='+fileFrom+'&fileTo='+fileTo,"add_"+fileFrom,"height=380, width=950");
			}
		});
 
	});
</script>

[Feng-Huang]

Merci sur l'explication de l'event click.

En revanche non cela ne fonctionne pas exactement comme voulu, car le clic doit ouvrir une pop-up. Sans cela sera aurait très bien été

J'ai trouvé dans un forum y'a quelques minutes une solution à base de class :

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
<script type="text/javascript">
$( function(){
 
	$('a.object').draggable({
		distance: 10, // On attend un déplacement de 10px de l'élément draggable avant de déclencher l'événement "start" et commencer le drag
		start: function(){
			$(this).addClass('noclick'); // Le drag a commencé donc on annule la fonction clic.
		},
		revert: true
 
	}).click( function(){
 
	    if ($(this).hasClass('noclick')) {
	        $(this).removeClass('noclick');
	    } else {
 
			var href = $(this).attr('href');
			var id = $(this).attr('id');
 
			window.open(href,'popup_' + id, "config='height=640, width=940, scrollbars=yes, resizable=yes");
 
			return false;
		}
 
	}).droppable({
		accept: 'a.object',
		drop: function(event, ui){
			var fileFrom = ui.helper.text();
			var fileTo = $(this).text();
			var popup = window.open('?module=link&action=add&obj=RSK&fileFrom='+fileFrom+'&fileTo='+fileTo,"add_"+fileFrom,"height=380, width=950");
		}
	});
 
});
</script>

Cela fonctionne très bien ainsi. En revanche je trouve surprenant qu'on doive en passer par la !