1

我编写了一段代码（如下），用于在元素上打开/关闭 JQuery Draggable。简而言之，当您单击一个名为按钮的 div 时，它会在另一个名为dragBlock的 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);
});
4

1 回答 1

6

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

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

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

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

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

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

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

于 2013-06-03T03:40:48.193 回答