Question

我写了一个代码块（下面），在一个元素上打开/关闭JQuery Draggable。简而言之，当您单击一个名为按钮的div时，它会在另一个 div上打开/关闭可拖动效果，该

div

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

$(dragBlock ).draggable(state);

相反，只有在我使用它时才有效：

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

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

代码如下：

$(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);
});

1 个答案:

答案 0 :(得分：5)

Answer 1

您应该在事件处理程序之外拥有.draggable()，并且内部只有.draggable(state)。

调用.draggable()是您最初在元素上设置可拖动功能的方式。

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

但请注意，通过在事件处理程序外调用draggable（），您的默认初始状态现在为enabled。您需要立即禁用它或更改state变量的初始值。

您可以初始化draggable并将其禁用（在事件处理程序之外）

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

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

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

1 个答案: