Unable to select text in Kendo Sortable with handle
I have a set of sortable widgets very similar to the demo . JS here:
    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");
      
        
        
        
      
    
The HTML for the panels looks something like this:
<div class="panel">
    <div class="panel-header">Header</div>
    <div class="panel-content">
        ... selectable text here ...
    </div>
</div>
      
        
        
        
      
    
While I was setting the parameter handler
      
        
        
        
      
    to the div .panel-header
      
        
        
        
      
    , I cannot select any text in the area .panel-content
      
        
        
        
      
    . The mouse cursor shows the text cursor, but nothing is highlighted when trying to select.
+3 
Fillip Peyton 
source
to share
      
1 answer
      
        
        
        
      
    
The solution was to use the option ignore
      
        
        
        
      
    and use a high level selector with the "select all" selector *
      
        
        
        
      
    . This is how my JS init calls look like:
    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");
      
        
        
        
      
     
+3 
Fillip Peyton 
source
to share