关闭可拖动

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