如何在if語句中打開/關閉JQueryUI Draggable

Question

我編寫了一個代碼塊（如下），用於在元素上打開/關閉JQuery Draggable。 總之，當你點擊一個div叫按鈕它切換開/關上另一格稱爲dragBlock

這花了一段時間，但我終於得到了它的工作可拖動效果。我的問題是我不明白爲什麼下面的代碼不適用於只有一個Draggable實例。主要是使用狀態參數的那個。

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

這不是一個大問題，但我想知道這是爲什麼，我的身影有人在這裏也許能解釋它：

$(dragBlock).draggable(state); 

相反，當我使用這個它只能。 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變量的初始值。

可以初始化拖動，並把它與該禁用（事件處理程序外）

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

然後你就只需要事件處理程序內的.draggable(state)。