Bonjour,

Je me permet de revenir une nouvelle fois pour un nouveau problème dans mon code , ici que cela est indiqué dans mon titre j'ai un soucis avec la gestion du clic avec le drag and drop, je m'explique:

En faite j'ai des éléments contenu dans une liste ceux-ci sont draggable via une fonction jquery ainsi je peu les deplacer de haut en bas, mon soucis viens du fais que je souhaite que c'est même éléments soit cliquable quand l'utilisateur n'est pas entrain de faire un drag and drop sur l'élément.

Hors après quelque recherche j'ai compris qu'il fallait que je joue avec le .bind() est .unbind() pour rendre cliquable ou non mon élément.

Après quelque test, j'obtients les résultats suivant:

- Mon élément est cliquable mais lorsque l'on fait un drag and drop dessus ben il est aussi considérer comme cliquer

- Mon élément est cliquable mais dès qu'on le bouge il n'est plus du tout cliquable

En bref, en partant sur mon deuxième cas il ne me manquerais plus cas rendre mon élément à nouveau cliquable une fois le drag and drop fini et donc c'est la ou je coince, après plusieurs tentative et l'utilisation d'unn setTimeout() je n'arrive pas au résultat escompter .

Un peu d'aide serait donc la bienvenu

Voici d'ailleurs mon code;

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
//fonction appeller pour réactiver le clic de l'élément
function click(elem){
			$(elem).find(".item").bind('click',function f(){console.log('toto');})
}
 
(function($){
$.fn.shoppingList = function(options) {
		// Options par defaut
 
	var defaults = {};
	var options = $.extend(defaults, options);
 
	this.each(function(){
 
	var obj = $(this);
 
	// Empêcher la sélection des éléments à la sourirs (meilleure gestion du drag & drop)
		var _preventDefault = function(evt) { evt.preventDefault(); };
		$("li").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
 
			// Initialisation du composant "sortable"
			$(obj).sortable({
				axis: "y", /* Le sortable ne s'applique que sur l'axe vertical
				containment: ".shoppingList", // Le drag ne peut sortir de l'élément qui contient la liste*/
				handle: ".item", /* Le drag ne peut se faire que sur l'élément .item (le texte)*/
				distance: 10, /* Le drag ne commence qu'à partir de 10px de distance de l'élément*/
 
                                // Evenement appelé lorsque l'élément est relaché
				stop: function(event, ui){
 
                                        // Pour chaque item de liste
					$(obj).find("li").each(function(){
 
						//$(this).find(".item").unbind('click');
						// On actualise sa position
						index = parseInt($(this).index()+1);
						// On la met à jour dans la page
						$(this).find(".count").text(index);
 
						//Je désactive le click sur l'élément
						$(this).find(".item").unbind("click");
						txt = $(this).text().replace(/^\s+|\s+$/g,'');		
 
                                                console.log(txt);
 
					});
 
				}
 
			});
 
			// Initialisation du composant Droppable
			$(obj).droppable({
				// Lorsque l'on relache un élément sur la poubelle
				drop: function(event, ui){
					/*Je lance ma fonction click au bout d'un temps donné après avoir lacher l'élément*/
					 setTimeout("click($(this))",1000);
				},
				// Lorsque l'on passe un élément au dessus de la poubelle
				over: function(event, ui){
 
 
				},
				// Lorsque l'on quitte la poubelle
				out: function(event, ui){
					//console.log("titi");
				}
			})
 
 
			// Pour chaque élément trouvé dans la liste de départ
			$(obj).find("li").each(function(){
 
 
				// On ajoute les contrôles
				addControls($(this));
			});
 
		});
 
 
 
 
/*
		* Fonction qui ajoute les contrôles aux items
		* @Paramètres
		*  - elt: élément courant (liste courante)
		*
		* @Return void
		*/
 
		function addControls(elt)
		{	
 
 
 
 
 
			// On ajoute en premier l'élément textuel
			$(elt).html("<span class='item'>"+$(elt).text()+"</span>");
 
			//Au clic sur lélément je le réactive 
			$(elt).find(".item").bind('click',function f(){console.log('toto');})
			// Puis l'élément de position
			//var toto=parseInt($(elt).index()+1);
 
			//$(elt).prepend('<span class="count">'+toto+'</span>');
 
			// Au double clic sur le texte, ici si on peu y incorporer le slid menu si besoin
 
 
 
 
 
 
		}
 
 
 
		// On continue le chainage JQuery
		return this;
	};
})(jQuery);
Merci pour l'aide