Pregunta

Mootools:Cómo permitir y no permitir var drag Dependiendo de checkbox comprobado ¿O no?

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>
¿Fue útil?

Solución

Almacenar la instancia de Drag en MooTools Tienda de elementos entonces, cuando se hace clic en la casilla de verificación, podemos recuperar esta instancia y manipularla.

Arrastrar.Mover es una extensión de la base Arrastrar clase, y si ve los documentos, notará que tiene dos métodos para esta situación:

Debes llamar a estos métodos en el objeto de arrastre que se crea cuando llamas new Drag.Move(..) para habilitar o deshabilitar el arrastre.

Así que primero crea el objeto de arrastre como ya lo estás haciendo:

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

Y luego almacenar una referencia de esto drag objeto dentro de Element Store para su posterior recuperación.

e.store('Drag', drag);

Puedes usar cualquier clave que quieras aquí; yo he usado "Drag".

Luego, más adelante en la función de verificación, recupere el objeto arrastrado y llame attach o detach en él dependiendo del estado de la casilla de verificación.

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 su ejemplo modificado para que funcione esta casilla de verificación.

Como nota al margen, si está recuperando un elemento por id, no necesita usar $$ ya que idealmente solo debería haber un elemento con esa identificación. $$("#dragable") es demasiado redundante y de menor rendimiento.Usar document.id('dragable') o $("dragable") en cambio.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top