带有可编辑列表项的 jQuery 嵌套可排序答案

【问题标题】：jQuery nested sortable with editable list items带有可编辑列表项的 jQuery 嵌套可排序
【发布时间】：2015-12-27 03:40:36
【问题描述】：

我正在使用 jQuery 嵌套可排序 plugin，但我希望能够通过 editablecontent='true' 属性编辑每个列表项的文本。

Demo of the code on JsFiddle

但是，当我尝试此操作时，我无法修改任何列表项的文本。我认为这是因为整个列表项被用作可拖动的部分（而不仅仅是项目符号 - 这是我想要的）。有没有办法做到这一点？

<script>
$('.sortable').nestedSortable({
        handle: 'div',
        items: 'li',
        listType: 'ul',
        isTree: true,
        toleranceElement: '> div'
    });});
</script>

<html>
<ul class="sortable">
<li><div>Some content</div></li>
<li>
    <div>Some content</div>
    <ul>
        <li><div contentEditable='true'>Some sub-item content</div></li>
        <li><div contentEditable='true'>Some sub-item content</div></li>
    </ul>
</li>
<li><div>Some content</div></li>

【问题讨论】：

标签： html jquery-ui jquery-ui-sortable

【解决方案1】：

您使用的插件似乎正在抑制该事件。

一种可能的解决方法是在单击元素时以编程方式触发元素上的focus 事件：

Updated Example

$('[contentEditable="true"]').on('click', function () {
    this.focus();
});

【讨论】：