I wrote a block of code (below) that toggles JQuery Draggable on/off on an element. In short , when you click a div called button it toggles the draggable effect on/off on another div called dragBlock

This took me awhile but I finally got it working. The question I have is I don't understand why the code below doesn't work with only one Draggable instance. Mainly the one that uses the state argument.

$(dragBlock ).draggable(state);

Instead it only works when I use this:

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

This isn't a big issue but I would like to know why this is and I figure someone here might be able to explain it. JSfiddle is here:

And the code is below:

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

I wrote a block of code (below) that toggles JQuery Draggable on/off on an element. In short , when you click a div called button it toggles the draggable effect on/off on another div called dragBlock

This took me awhile but I finally got it working. The question I have is I don't understand why the code below doesn't work with only one Draggable instance. Mainly the one that uses the state argument.

$(dragBlock ).draggable(state);

Instead it only works when I use this:

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

This isn't a big issue but I would like to know why this is and I figure someone here might be able to explain it. JSfiddle is here:

And the code is below:

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

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Jun 3, 2013 at 3:57 Sanath 4,8841111 gold badges5757 silver badges8787 bronze badges asked Jun 3, 2013 at 3:36 WilliamWilliam 4,5881818 gold badges6666 silver badges117117 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You should really have the .draggable() outside the event handler, and only the .draggable(state) inside.

Calling .draggable() is how you initially setup the draggable functionality on the element.

Calling .draggable('enable') or .draggable('disable') is a way to enable or disable an already-configured draggable element. It's a way to interact with a draggable element that you've already setup.

Note though, that by calling draggable() outside the event handler your default initial state will now be enabled. You need to either disable it immediately or change your initial value for the state variable.

You can initialize the draggable and leave it disabled with this (outside the event handler)

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

And then you'll only need the .draggable(state) inside the event handler.