如何根据选中的`checkbox`禁止`var drag`？

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 Element Store中，因此，当单击复选框时，我们可以检索此实例并对其进行操作。

Drag.Move是对基础Drag类的扩展，如果您看到文档，您会注意到它为这种情况提供了两种方法：

• attach
• detach

您需要在调用new Drag.Move(..)以启用或禁用拖动时创建的拖动对象上调用这些方法。

因此，首先像您已经做的那样创建拖动对象：

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

然后将该drag对象的引用存储在Element Store中，以供以后检索。

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

请参阅您的example修改为可以使用此复选框。

在旁注中，如果要通过id检索元素，则不需要使用$$，因为理想情况下，仅应具有该id的元素。 $$("#dragable")太多余，性能也不佳。改用document.id('dragable')或$("dragable")。