Невозможно выбрать текст в Kendo Sortable с ручкой

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 для панелей выглядеть примерно так:

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

В то время как я установил handler вариант к .panel-header DIV, я не могу выбрать любой текст в .panel-content области. Курсор мыши показывает текстовый курсор, но при попытке выделить ничего не подсвечивается.

Answer 1

Решение должно было использовать опцию ignore и использовать селектор высокого уровня с селектором «select all» *. Вот что мои 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");