Wie kann ich „Var Drag“ je nach aktiviertem „Kontrollkästchen“ verbieten?

Question

Mootools:So erlauben und verbieten Sie var drag es hängt davon ab checkbox überprüft oder nicht?

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

Speichern Sie die Instanz von Drag in MooTools Element Store Wenn also das Kontrollkästchen angeklickt wird, können wir diese Instanz abrufen und bearbeiten.

Ziehen.Verschieben ist eine Erweiterung der Basis Ziehen Klasse, und wenn Sie sich die Dokumente ansehen, werden Sie feststellen, dass es für diese Situation zwei Methoden gibt:

• anfügen
• ablösen

Sie müssen diese Methoden für das Drag-Objekt aufrufen, das beim Aufruf erstellt wird new Drag.Move(..) um das Ziehen zu aktivieren oder zu deaktivieren.

Erstellen Sie also zunächst das Drag-Objekt, wie Sie es bereits tun:

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

Und dann speichern Sie eine Referenz davon drag Objekt im Element Store zum späteren Abruf speichern.

e.store('Drag', drag);

Sie können hier jeden gewünschten Schlüssel verwenden – ich habe ihn verwendet "Drag".

Rufen Sie dann später in der Prüffunktion das Drag-Objekt ab und rufen Sie es auf attach oder detach abhängig vom Status des Kontrollkästchens darauf.

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

Sehe deine Beispiel Das Kontrollkästchen wurde geändert, damit dies funktioniert.

Nebenbei bemerkt: Wenn Sie ein Element anhand der ID abrufen, müssen Sie es nicht verwenden $$ da es im Idealfall nur ein Element mit dieser ID geben sollte. $$("#dragable") ist einfach zu redundant und weniger performant.Verwenden document.id('dragable') oder $("dragable") stattdessen.