關閉可拖動

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