CODEWITHSUNDEEP
jquerykendo-uiselectionjquery-ui-sortabletextselection
Fillip Peyton
Fillip Peyton

Reputation: 3657

Cannot select text in Kendo Sortable with handle

I have a set of sortable widgets, very similar to this demo. JS inits 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");

HTML for the panels look similar to this:

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

While I've set a handler option to the .panel-header div, I cannot select any text within the .panel-content area. The mouse cursor shows the text cursor, but upon trying to highlight, nothing is highlighted.

Upvotes: 3

Views: 1063

Answers (1)

Fillip Peyton
Fillip Peyton

Reputation: 3657

The solution was to use the ignore option and use a high-level selector with the "select all" selector *. Here's what my JS init calls look like now:

    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");

Upvotes: 3

Related Questions