Turning off draggable
<p>I'm currently trying to create a desktop like homepage where using can move around panels. I've initialized these panels as draggable items in jQuery but I want them to only be draggable when in "edit mode" which is a flag I keep track of.</p>

<p>Since I can't seem to figure out how to turn off draggrable items (<em>disable</em> isn't what I'm looking for, disable seems to disable the whole element) I just add and remove a class named ".on" which is used as the handle. Thing is, when I remove ".on" the whole element becomes the handle which kind of defeats the purpose of not being in edit mode :) The oddest thing is that this method worked perfectly when I used sortable items instead of draggable.</p>

<p>And here's my javascript</p>

<pre><code>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');
  }
 });

});
</code></pre>

<p>and my HTML</p>

<pre><code>    &lt;ul class="widgets"&gt;
     &lt;li id="1" class="widget_panel"&gt;
      &lt;div class="widget_content"&gt;
       &lt;h3 class="handle"&gt;Widget Title&lt;/h3&gt;
      &lt;/div&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
&lt;input id="test" type="button" value="test" /&gt;
</code></pre>

<p>So any tips on how I could achieve this? Any help is appreciated :)</p>
