无法在Kendo中选择带句柄的文本 [英] Cannot select text in Kendo Sortable with handle

问题描述

我有一组可排序的小部件，非常类似于此演示. JS inits:

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类似于以下内容:

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>

虽然我为.panel-header div设置了handler选项，但不能选择.panel-content区域内的任何文本.鼠标光标显示为文本光标，但是在尝试突出显示时，不会突出显示任何内容.

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.

推荐答案

解决方案是使用ignore选项，并使用带有全选"选择器*的高级选择器.这是我的JS init调用现在的样子:

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

这篇关于无法在Kendo中选择带句柄的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！