Question

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 🙂

Answer 1

Forget about your extra class. Do it this way:

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