如何在if语句中打开/关闭JQueryUI Draggable

How to toggle JQueryUI Draggable on/off in an if statement

本文关键字：关闭 JQueryUI Draggable if 语句      更新时间：2023-09-26

我编写了一段代码(如下)，用于在元素上打开/关闭JQuery Draggable。简而言之，当你点击一个名为的div按钮时，它会在上切换另一个名为的div的dragBlock

上的可拖动效果

这花了我一段时间，但我终于让它工作。我的问题是，我不明白为什么下面的代码不工作，只有一个Draggable实例。主要是使用state参数的那个。

$(dragBlock ).draggable(state);

相反，它只在我使用

时起作用:
$(dragBlock ).draggable(state);
$(dragBlock ).draggable();           // This line is needed for the code to work. Why?

这不是一个大问题，但我想知道为什么会这样，我想这里有人可能能够解释它。 jsfield 在这里:

代码如下:

$(document).ready(function() {
   var state = "disable";
   var button = document.getElementById("button");
   var dragBlock = document.getElementById("dragBlock");
   var toggle = function() {
   if (state==="enable") {
       state = "disable";
   }
   else if(state==="disable") {
       state = "enable";
   }
   $(dragBlock ).draggable(state);
   $(dragBlock ).draggable();           // This line is needed for the code to work. Why?
   console.log(state);
};
  button.addEventListener("click", toggle, false);
});

您应该在事件处理程序外部真正地使用.draggable()，而在内部只使用.draggable(state)。

调用.draggable()是如何在元素上初始设置可拖动功能的。

调用.draggable('enable')或.draggable('disable')是一种启用或禁用已配置的可拖动元素的方法。这是一种与你已经设置好的可拖动元素交互的方式。

注意，通过在事件处理程序之外调用draggable()，您的默认初始状态现在将是enabled。您需要立即禁用它，或者更改state变量的初始值。

你可以初始化draggable，并使用这个(在事件处理程序之外)将其禁用

('#dragBlock').draggable({disabled: true});

然后在事件处理程序中只需要.draggable(state)。

相关文章：