jQuery 具有可编辑列表项的可嵌套排序

Question

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

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

<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>

Answer 1

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

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

Updated Example

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

jQuery 具有可编辑列表项的可嵌套排序

jQuery nested sortable with editable list items

html

jquery-ui

jquery-ui-sortable