Discussion :

[zadoner33]

Bonjour,

j'utilise pour mon site, l'excellent plugin "Dragula" https://github.com/bevacqua/dragula
Site démo : http://bevacqua.github.io/dragula/

Le but étant de pouvoir "déplacer" différents bloc de contenus dans différentes colonnes.

Dans mon site, je voudrais pouvoir activer/ désactiver cet "effet" via deux boutons distinct.

Je parviens bien à "Activer" mais pas à "désactiver" ce plugin
(ma fonction moveBlock active bien l'effet de déplacement des blocs entre les colonnes1 et 2 mais la fonction removeBlock ne fonctionne pas.. )

J'ai tenté plusieurs choses (en m'aidant de la doc) mais sans succès. Si quelqu'un pouvait m'aider à savoir quoi mettre dans ma fonction "removeBlock"

Dans le html :

Code html :

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

1
2
<a  href="javascript:;" class="btn" title="Move" onclick="moveBlock();"><i class="fa fa-arrows"></i></a>
<a  href="javascript:;" class="btn" title="Move" onclick="removeBlock();"><i class="fa fa-arrows"></i></a>

Et dans le Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
 
function moveBlock(){
   dragula([ document.getElementById('colonne1'), document.getElementById('colonne2')]);
}
function removeBlock(){
   // j'ai désactivé les lignes ci-dessous car elles sont sans effet
   // dragula([ document.getElementById('colonne1'), document.getElementById('colonne2')]).end();
   // dragula([ document.getElementById('colonne1'), document.getElementById('colonne2')]).destroy();
}

[mathieu]

essayez la méthode invalid qui désactive les déplacements
https://github.com/bevacqua/dragula#optionsinvalid

[zadoner33]

Merci pour ton aide Mathieu.
J'ai effectivement testé avec invalid mais sans succès.
Je pense que je n'utilise pas les méthodes comme il le faudrait..

Pour activer les déplacements j'y parviens pourtant correctement (cf fonction moveBlock) mais la fonction removeBlock, rien ne semble fonctionner.
J'ai tenté de faire comme dans la doc, à savoir créé une variable drake :

Code :

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

1
2
3
4
 
var drake = dragula([ document.getElementById('colonne1'), document.getElementById('colonne2')]);
//puis
drake.invalid();

mais toujours sans succès, cela vient sans doute de l'utilisation de la méthode que je semble ne pas savoir comment correctement utiliser...

j'ai tenté de reproduire mon problème ici : http://jsfiddle.net/tt7mgdrx/

ps: on pourrait croire que ça fonctionne presque, mais une fois clicqué sur MOVE puis sur REMOVE il est toujours possible de glisser des blocs de la colonne 1 à la colonne 2 et surtout lorsque je clic sur "MOVE" une nouvelle fois, le fonctionnement est un peu chaotique...

[mathieu]

l'option "invalid" permet d'indiquer une fonction qui doit retourner true ou false, suivant que les déplacements soient autorisés ou non

avec une variable globale ça donne ça :
http://jsfiddle.net/tt7mgdrx/1/

[zadoner33]

Un grand grand merci Mathieu !
Sans ton aide, je m'en serais pas sorti.
Bonne fin de journée.
David