Disabling draggable

Question

I'm currently trying to create a desktop, such as a homepage, where usage can move through panels. I initialized these panels as draggable items in jQuery, but I want them to be draggable only in edit mode, which is the flag that I'm tracking.

Since I cannot figure out how to disable draggable items (disable not what I'm looking for, disable, seems to disable the whole element). I just add and remove a class called ".on", which is used as a pen. The fact is that when I delete ".on", the whole element becomes a descriptor that hits the target not to be in edit mode :) The strangest thing is that this method worked fine when I used sorted elements instead of draggable.

And here is my javascript

var edit_mode = false;

$(document).ready(function() {

 $('.widget_panel').draggable(
 {
  handle: '.handle.on',
  stack: {
      group: '.widget_panel',
      min: 10
      },
  scroll: false
 }).disableSelection();

 $('#test').click(function()
 {
  edit_mode = !edit_mode;

  if(edit_mode)
  {
   $('.handle').addClass('on');
  }
  else
  {
   $('.handle').removeClass('on');
  }
 });

});

and my HTML

    <ul class="widgets">
     <li id="1" class="widget_panel">
      <div class="widget_content">
       <h3 class="handle">Widget Title</h3>
      </div>
     </li>
    </ul>
<input id="test" type="button" value="test" />

So, any tips on how I could achieve this? Any help is appreciated :)

Answer 1

Forget about your extra class. Do it like this:

  if(edit_mode) {
      $('.widget_panel').draggable('option', 'cancel', '');
  } else {
      $('.widget_panel').draggable('option', 'cancel', '.handle');
  }