如何根据选中的“checkbox”禁止“var Drag”？

发布于 2024-09-09 02:43:56 字数 781 浏览 3 评论 0 原文

Mootools：如何根据复选框允许和禁止var拖动 检查与否？

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>

原文

Mootools: How to Allow and Disallow var drag depending on checkbox checked or not?

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如果没结果 2024-09-16 02:43:56

将 Drag 实例存储在 MooTools Element Store 因此，当单击该复选框时，我们可以检索此实例并对其进行操作。

Drag.Move 是基础 Drag 类，如果您查看文档，您会注意到它有两种用于这种情况的方法：

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

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

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

然后将这个拖动对象的引用存储在元素存储中以供以后检索。

e.store('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")。

Store the instance of Drag in MooTools Element Store so when the checkbox is clicked, we can retrieve this instance and manipulate it.

Drag.Move is an extension to the base Drag class, and if you see the docs, you will notice it has two methods for this situation:

You need to call these methods on the drag object that gets created when you call new Drag.Move(..) to enable or disable dragging.

So first create the drag object as you are already doing:

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

And then store a reference of this drag object inside the Element Store for later retrieval.

e.store('Drag', drag);

You can use any key you want here - I've used "Drag".

Then later in the check function, retrieve the drag object, and call attach or detach on it depending on the state of the checkbox.

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

See your example modified to work this the checkbox.

On a side note, if you are retrieving an element by id, you don't need to use $$ as ideally there should only be only element with that id. $$("#dragable") is just too redundant and less performant. Use document.id('dragable') or $("dragable") instead.