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

Question

我写了一个代码块(下面),在一个元素上打开/关闭JQuery Draggable.简而言之,当您单击一个名为button的div时,它会在另一个名为dragBlock的 div 上打开/关闭可拖动效果

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

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

Answer 1

你应该真的有.draggable()事件处理程序外部,只有.draggable(state)内部.

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

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

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

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

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

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