Как запретить `var перетаскивание` в зависимости от установленного флажка?

Question

Mootools:Как разрешить и запретить var drag в зависимости от checkbox проверено или нет?

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

Сохраните экземпляр Drag в MooTools Магазин элементов поэтому, когда флажок установлен, мы можем получить этот экземпляр и манипулировать им.

Перетащить.Переместить является продолжением базы Тащить class, и если вы посмотрите документацию, вы заметите, что у него есть два метода для этой ситуации:

• прикреплять
• отделить

Вам нужно вызвать эти методы для объекта перетаскивания, который создается при вызове new Drag.Move(..) чтобы включить или отключить перетаскивание.

Итак, сначала создайте объект перетаскивания, как вы уже это делаете:

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

А затем сохраните ссылку на это drag объект внутри хранилища элементов для последующего извлечения.

e.store('Drag', drag);

Вы можете использовать любой ключ, какой захотите — я использовал "Drag".

Затем позже в функции проверки извлеките объект перетаскивания и вызовите attach или detach на нем в зависимости от состояния флажка.

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

Увидеть свой пример изменен для работы этого флажка.

Кстати, если вы получаете элемент по идентификатору, вам не нужно использовать $$ поскольку в идеале должен быть только элемент с этим идентификатором. $$("#dragable") слишком избыточен и менее эффективен.Использовать document.id('dragable') или $("dragable") вместо.