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, {
    ...
});

然后在Element Store中存储此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
    }
}

查看您的example已修改为此复选框。

另外，如果您要按ID检索元素，则不需要使用$$，因为理想情况下只应该只有该ID的元素。 $$("#dragable")过于冗余且性能较差。请改用document.id('dragable')或$("dragable")。

Mootools：如何禁止`var drag`取决于`checkbox`选中？

1 个答案: