Come non consentire il `Trascinaggio del var` a seconda della" casella di controllo`

Question

Moooools : Come consentire e non consentire var drag A seconda del checkbox Controllato 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>

.

Answer 1

Conservare l'istanza di Drag in Mooools Element Store Quindi quando si fa clic sulla casella di controllo, possiamo recuperare questa istanza e manipolarlo.

Drag.Move è un'estensione della base trascinare classe, e se vedi i documenti, noterai che ha due metodi per questa situazione:

.
• Allega
• Staccare

È necessario chiamare questi metodi sull'oggetto di trascinamento che viene creato quando si chiama new Drag.Move(..) per abilitare o disabilitare il trascinamento.

Quindi prima crea l'oggetto di trascinamento come stai già facendo:

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

.

e quindi memorizzare un riferimento di questo oggetto drag all'interno del negozio di elementi per il recupero successivo.

e.store('Drag', drag);

.

Puoi usare qualsiasi tasto che desideri qui - Ho usato "Drag".

Quindi, più avanti nella funzione di controllo, recuperare l'oggetto di trascinamento e chiamare attach o detach su di esso a seconda dello stato della casella di controllo.

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

.

Vedi il tuo Esempio modificato per funzionare questa casella di controllo.

Su una nota laterale, se si sta recuperando un elemento tramite ID, non è necessario utilizzare $$ come idealmente dovrebbe essere solo solo elemento con quell'ID. $$("#dragable") è troppo ridondante e meno performante. Utilizzare invece document.id('dragable') o $("dragable").