Como proibir `var drag` dependendo da `checkbox` marcada?

Question

Mootools:Como permitir e proibir var drag dependendo checkbox verificado ou não?

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

Armazene a instância de Drag em MooTools Loja de Elementos portanto, quando a caixa de seleção for clicada, podemos recuperar esta instância e manipulá-la.

Arrastar.Mover é uma extensão da base Arrastar class, e se você ver a documentação, notará que ela possui dois métodos para esta situação:

• anexar
• separar

Você precisa chamar esses métodos no objeto arrastar que é criado quando você chama new Drag.Move(..) para ativar ou desativar o arrastamento.

Então primeiro crie o objeto de arrastar como você já está fazendo:

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

E então armazene uma referência disso drag objeto dentro do Element Store para recuperação posterior.

e.store('Drag', drag);

Você pode usar qualquer chave que quiser aqui - eu usei "Drag".

Mais tarde, na função de verificação, recupere o objeto de arrastar e chame attach ou detach nele, dependendo do estado da caixa de seleção.

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
    }
}

Ver o seu exemplo modificado para funcionar esta caixa de seleção.

Por outro lado, se você estiver recuperando um elemento por id, não precisará usar $$ pois idealmente deveria haver apenas um elemento com esse ID. $$("#dragable") é muito redundante e com menos desempenho.Usar document.id('dragable') ou $("dragable") em vez de.