Turning off draggable

jquery

Solution

Forget about your extra class. Do it this way:

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

Problem

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. Since I can't seem to figure out how to turn off draggrable items (disable 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. And here's 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 :)

Original source