드래그 가능 해제하기

Question

현재 홈페이지와 같이 패널을 사용하여 이동할 수있는 데스크탑을 만들려고합니다. 이 패널을 jQuery에서 드래그 가능한 아이템으로 초기화했지만, 계속 추적 할 플래그 인 "편집 모드"에서만 드래그 가능하게하고 싶습니다.

드래그 할 수없는 항목을 해제하는 방법을 알아낼 수 없기 때문에 (사용 안함은 내가 찾고있는 것이 아니며 전체 요소를 사용하지 않도록 설정되어있는 것으로 보입니다) .on "은 핸들로 사용됩니다. 내가 ".on"을 제거하면 전체 요소가 어떤 종류의 편집 모드가 아닌 목적을 무효화하는 핸들이됩니다. 가장 이상한 점은 draggable 대신 정렬 가능한 항목을 사용할 때이 메서드가 완벽하게 작동한다는 것입니다.

그리고 여기 내 자바 스크립트

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