검도에서 텍스트를 선택할 수 없습니다 핸들로 정렬 할 수 있습니다

Question

나는이 demo과 매우 유사한 정렬 가능한 위젯 세트를 가지고 있습니다. JS는 여기 inits : 패널에 대한

var column1Sortable = $(column1Selector).kendoSortable({ 
     filter: ".panel", 
     cursor: "move", 
     handler: ".panel-header", 
     connectWith: column2Selector, 
     change: sortableOnChange, 
     placeholder: sortablePlaceholder, 
     hint: sortableHint 
    }).data("kendoSortable"); 
    var column2Sortable = $(column2Selector).kendoSortable({ 
     filter: ".panel", 
     cursor: "move", 
     handler: ".panel-header", 
     connectWith: column1Selector, 
     change: sortableOnChange, 
     placeholder: sortablePlaceholder, 
     hint: sortableHint 
    }).data("kendoSortable"); 

HTML이에 유사 :

나는 .panel-header DIV에 handler 옵션을 설정 한 동안

<div class="panel"> 
    <div class="panel-header">Header</div> 
    <div class="panel-content"> 
     ... selectable text here ... 
    </div> 
</div> 

, 나는 .panel-content 지역 내의 텍스트를 선택할 수 없습니다. 마우스 커서는 텍스트 커서를 표시하지만 강조하려고 할 때 아무 것도 강조 표시되지 않습니다.

Answer 1

해결책은 ignore 옵션을 사용하고 "모두 선택"셀렉터 *이있는 상위 레벨 선택기를 사용하는 것이 었습니다. 여기에 내 JS 초기화 호출은 무엇입니까 :

var column1Sortable = $(column1Selector).kendoSortable({ 
     filter: ".panel", 
     cursor: "move", 
     handler: ".panel-header", 
     ignore: ".panel-contents *", 
     connectWith: column2Selector, 
     change: sortableOnChange, 
     placeholder: sortablePlaceholder, 
     hint: sortableHint 
    }).data("kendoSortable"); 
    var column2Sortable = $(column2Selector).kendoSortable({ 
     filter: ".panel", 
     cursor: "move", 
     handler: ".panel-header", 
     ignore: ".panel-contents *", 
     connectWith: column1Selector, 
     change: sortableOnChange, 
     placeholder: sortablePlaceholder, 
     hint: sortableHint 
    }).data("kendoSortable");