Question

我目前正在尝试创建一个类似主页的桌面，其中使用可以移动面板。我已经将这些面板初始化为jQuery中的可拖动项目，但我希望它们只能在“编辑模式”下拖动，这是我追踪的标志。

因为我似乎无法弄清楚如何关闭可拖动的项目（禁用不是我正在寻找的，禁用似乎禁用整个元素）我只是添加和删除一个名为“.on”的类，用作句柄。事情是，当我删除“.on”时，整个元素变成了那种打败不处于编辑模式的目的的手柄:)最奇怪的是，当我使用可排序的项目而不是可拖动时，这种方法工作得很好。

这是我的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');
  }
 });

});

和我的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" />

关于如何实现这一目标的任何提示？任何帮助表示赞赏：）

Answer 1

忘记你的额外课程。这样做：

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

关掉可拖动的

1 个答案: