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.