Gestion du click avec le drag and drop
Bonjour,
Je me permet de revenir une nouvelle fois pour un nouveau problème dans mon code :lol: , 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
:aie::aie: 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 :cry:.
Un peu d'aide serait donc la bienvenu :mrgreen:
Voici d'ailleurs mon code;
Code:
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
