¿Cómo no permitir "var drag" dependiendo de la "casilla de verificación" marcada?
-
13-09-2020 - |
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>
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.