jquery - 无法在 Kendo Sortable 中选择带 handle 的文本

Question

我有一组可排序的小部件，与此非常相似demo 。 JS 在这里初始化:

    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>

虽然我为 .panel-header div 设置了 handler 选项，但我无法选择 .panel-content 中的任何文本> 区域。鼠标光标显示文本光标，但在尝试突出显示时，没有突出显示任何内容。

Answer 1

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

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