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
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
source to share