Comment Interdire la var glisser` en fonction de `checkbox` checked?

Question

Mootools:Comment faire pour Autoriser et Interdire var drag selon checkbox vérifié ou pas?

window.addEvent('domready',function() {
  var z = 2;
  $$('#dragable').each(function(e) {
    var drag = new Drag.Move(e,{
      grid: false,
      preventDefault: true,
      onStart: function() {
        e.setStyle('z-index',z++);
      }
    });
  });
});
function check(tag){
  if(tag.checked){
    //checkbox checked
    //How to Disallow Drag.Move for #dragable ?
    //Unfortunately so it does not work - drag.destroy(); drag.removeEvents();
  }else{
    //How to Allow Drag.Move for #dragable ?
  }
}
<input type="checkbox" onClick="check(this);">
<div id="dragable">Drag-able DIV</div>

Answer 1

Stocker l'instance de Drag dans MooTools Élément De Magasin ainsi, lorsque la case est coché, on peut récupérer cette instance et le manipuler.

Faites-le glisser.Déplacer est une extension de la base Faites glisser de la classe, et si vous voyez les docs, vous remarquerez qu'il a deux méthodes de cette situation:

• joindre
• détacher

Vous avez besoin d'appeler ces méthodes sur l'objet de glisser qui est créé lorsque vous appelez new Drag.Move(..) pour activer ou désactiver le faisant glisser.

Donc tout d'abord créer l'objet de glisser comme vous le faites déjà:

var drag = new Drag.Move(e, {
    ...
});

Et puis stocker une référence de cette drag de l'objet à l'intérieur de l'Élément de Magasin pour une récupération ultérieure.

e.store('Drag', drag);

Vous pouvez utiliser n'importe quelle touche que vous voulez ici que j'ai utilisé "Drag".

Puis, plus tard dans la fonction de contrôle, de récupérer l'objet de glisser, et de les appeler attach ou detach sur ce en fonction de l'état de la case à cocher.

function check(elem) {
    var drag = elem.retrieve('Drag'); // retrieve the instance we stored before

    if(elem.checked) {
        drag.detach(); // disable dragging
    }
    else {
        drag.attach(); // enable dragging
    }
}

Voir votre exemple modifié pour fonctionner cet la case.

Sur une note de côté, si vous êtes de la récupération d'un élément par son id, vous n'avez pas besoin d'utiliser $$ que, idéalement, il ne devrait être seul élément avec l'id. $$("#dragable") est tout simplement trop redondant et moins performant.Utilisation document.id('dragable') ou $("dragable") au lieu de cela.