如何根据选中的“复选框”禁止“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类的扩展，如果您查看文档，您会注意到它有两种用于这种情况的方法：

• 附
• 分离

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

所以首先创建拖动对象，因为你已经在做：

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

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

e.store('Drag', drag);

你可以在这里使用任何你想要的键 - 我用过"Drag" 。

然后在 check 函数中，检索拖动对象，并根据复选框的状态对其调用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
    }
}

请参阅修改后的示例以使用此复选框。

附带说明一下，如果您通过 id 检索元素，则不需要使用$$因为理想情况下应该只有具有该 id 的元素。 $$("#dragable")过于冗余且性能较低。 改用document.id('dragable')或$("dragable") 。