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); |
Gestion du click avec le drag and drop
, 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 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
.
Répondre avec citation
, mais après quelque recherche j'ai trouvé la solution 
, ce qui nous donne après correction ceci:
Envoyé par Darkaurora
Partager