如何根据选中的"复选框"禁止"var拖动"？

Question

[医]木托:如何允许和不允许 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 元素存储 因此，当复选框被点击时，我们可以检索这个实例并操作它。

拖。移动 是基部的延伸 拖动 类，如果你看到文档，你会注意到它有两种方法用于这种情况:

• 附上
• 分离,分离

您需要在调用时创建的拖动对象上调用这些方法 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
    }
}

查看您的 例子： 修改为工作此复选框。

另外，如果您通过id检索元素，则不需要使用 $$ 理想情况下，应该只有具有该id的元素。 $$("#dragable") 只是太多余，性能也太差。使用方法 document.id('dragable') 或 $("dragable") 相反。